diff --git a/frontend/src/pages/CalendarPage.jsx b/frontend/src/pages/CalendarPage.jsx index 8a90aea..c2bd38a 100644 --- a/frontend/src/pages/CalendarPage.jsx +++ b/frontend/src/pages/CalendarPage.jsx @@ -85,6 +85,8 @@ const DAYS_IN_MONTH = [ ]; +const WEEKDAY_INITIALS = ['D', 'L', 'M', 'M', 'J', 'V', 'S']; + const HEADER_HEIGHT = 35; const DAY_COLUMN_WIDTH = 45; @@ -1539,6 +1541,16 @@ const CalendarPage = () => { monthIndex, day, ); + const cellDayNumber = + Math.floor( + Date.UTC(getMonthYear(monthIndex), monthIndex, day) / 86400000, + ); + const alternateWeek = + Math.floor((cellDayNumber + 3) / 7) % 2 !== 0; + const weekdayInitial = + WEEKDAY_INITIALS[ + new Date(Date.UTC(getMonthYear(monthIndex), monthIndex, day)).getUTCDay() + ]; const selectedCell = isDateSelected(cellDate); const dayEvents = @@ -1578,15 +1590,10 @@ const CalendarPage = () => { border-border ${dayIndex < rowCount - 1 ? 'border-b' : ''} ${monthIndex !== displayedMonthIndices[displayedMonthIndices.length - 1] ? 'border-r' : ''} - bg-card + ${todayCell ? 'bg-muted' : alternateWeek ? 'bg-muted/40' : 'bg-card'} px-2 transition-colors hover:bg-muted/40 - ${ - todayCell - ? 'bg-muted' - : '' - } ${ selectedCell ? 'bg-primary/15 ring-1 ring-inset ring-primary/40' @@ -1636,9 +1643,17 @@ const CalendarPage = () => { text-primary-foreground " > - {day} + {weekdayInitial} )} + {!todayCell && ( + + )} {/* ================================================== ÉVÉNEMENTS SUR UNE PÉRIODE ================================================== */}