Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

link homepage calendar to backend

Browse Source
This commit is contained in:
T'JAMPENS QUENTIN p2406187
2026-01-07 15:15:02 +01:00
parent 0f0c51cfbd
commit 5d7a79f82a
1 changed files with 52 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/homePage/calendar.jsx
+52 -72
View File
@@ -1,30 +1,39 @@
import {useState} from "react";
import { useState, useMemo, useEffect } from "react";
import styles from "./calendar.module.css";
import formatDateLetter from "../../utils/date/formatDateLetter.js";
function Calendar() {
const events = {
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
"2025-11-14": ["Sortie cinéma"],
"2025-11-15": ["Sortie cinéma"],
"2025-11-17": ["Sortie cinéma"],
};
function Calendar({ events = [] }) {
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
const today = new Date();
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
const [currentYear, setCurrentYear] = useState(today.getFullYear());
const [selectedDay, setSelectedDay] = useState(() => {
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, "0");
const day = String(today.getDate()).padStart(2, "0");
const key = `${year}-${month}-${day}`;
return {date: key, events: events[key] || []};
});
const [selectedDay, setSelectedDay] = useState(null);
const eventsByDate = useMemo(() => {
return events.reduce((acc, ev) => {
if (!ev?.start) return acc;
const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
if (!acc[dateKey]) acc[dateKey] = [];
acc[dateKey].push(ev);
return acc;
}, {});
}, [events]);
useEffect(() => {
const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
setSelectedDay({
date: key,
events: eventsByDate[key] || []
});
}, [eventsByDate]);
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
@@ -34,87 +43,55 @@ function Calendar() {
for (let i = 0; i < startDay; i++) days.push(null);
for (let i = 1; i <= daysInMonth; i++) days.push(i);
const handlePrevMonth = () => {
let newMonth = currentMonth - 1;
let newYear = currentYear;
if (newMonth < 0) {
newMonth = 11;
newYear--;
}
setCurrentMonth(newMonth);
setCurrentYear(newYear);
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
setSelectedDay({date: key, events: events[key] || []});
};
const handleNextMonth = () => {
let newMonth = currentMonth + 1;
let newYear = currentYear;
if (newMonth > 11) {
newMonth = 0;
newYear++;
}
setCurrentMonth(newMonth);
setCurrentYear(newYear);
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
setSelectedDay({date: key, events: events[key] || []});
const selectDay = (year, month, day) => {
const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
setSelectedDay({
date: key,
events: eventsByDate[key] || []
});
};
const handleDayClick = (day) => {
if (!day) return;
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
setSelectedDay({date: key, events: events[key] || []});
selectDay(currentYear, currentMonth, day);
};
return (
<div className={styles.glassCard}>
<div className={styles.calendarContainer}>
<div className={styles.calendarHeader}>
<button onClick={handlePrevMonth}>◀</button>
<button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
<p>{monthNames[currentMonth]} {currentYear}</p>
<button onClick={handleNextMonth}>▶</button>
<button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
</div>
<table className={styles.calendar}>
<thead>
<tr>
<th>Lun</th>
<th>Mar</th>
<th>Mer</th>
<th>Jeu</th>
<th>Ven</th>
<th>Sam</th>
<th>Dim</th>
<th>Lun</th><th>Mar</th><th>Mer</th>
<th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
</tr>
</thead>
<tbody>
{Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
<tr key={weekIndex}>
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
<tr key={w}>
{days.slice(w * 7, w * 7 + 7).map((day, i) => {
if (!day) return <td key={i}></td>;
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
const hasEvent = events[key];
const hasEvent = (eventsByDate[key]?.length ?? 0) > 0;
return (
<td
key={index}
key={i}
className={[
day === today.getDate() &&
currentMonth === today.getMonth() &&
currentYear === today.getFullYear()
? styles.today : "",
hasEvent ? styles.hasEvent : "",
selectedDay?.date === key ? styles.selected : ""
].join(" ")}
onClick={() => handleDayClick(day)}
>
{day || ""}
{day}
</td>
);
})}
@@ -125,12 +102,15 @@ function Calendar() {
{selectedDay && (
<div className={styles.eventBox}>
<h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
<h3>Événements du {selectedDay.date}</h3>
{selectedDay.events.length > 0 ? (
<ul>
{selectedDay.events.map((ev, i) => (
<li key={i}>{ev}</li>
{selectedDay.events.map(ev => (
<li key={ev.id}>
<strong>{ev.name}</strong><br />
{ev.description}
</li>
))}
</ul>
) : (
@@ -143,4 +123,4 @@ function Calendar() {
);
}
export default Calendar;
export default Calendar;