diff --git a/src/frontend/src/components/calendar/Calendar.tsx b/src/frontend/src/components/calendar/Calendar.tsx index c3e4b9d333..a579c87ae1 100644 --- a/src/frontend/src/components/calendar/Calendar.tsx +++ b/src/frontend/src/components/calendar/Calendar.tsx @@ -1,6 +1,7 @@ import type { CalendarOptions, DatesSetArg, + DayCellContentArg, EventContentArg } from '@fullcalendar/core'; import allLocales from '@fullcalendar/core/locales-all'; @@ -182,6 +183,25 @@ export default function Calendar({ [calendarProps.eventContent, eventTooltipContent] ); + const monthDayCellClassNames = useCallback( + (arg: DayCellContentArg): string[] => { + const monthClass = + arg.date.getMonth() % 2 === 0 + ? 'fc-day-month-even' + : 'fc-day-month-odd'; + const existing = calendarProps.dayCellClassNames; + if (!existing) return [monthClass]; + if (typeof existing === 'function') { + const result = existing(arg); + const arr = Array.isArray(result) ? result : result ? [result] : []; + return [monthClass, ...arr]; + } + if (Array.isArray(existing)) return [monthClass, ...existing]; + return [monthClass, existing as string]; + }, + [calendarProps.dayCellClassNames] + ); + return ( <> {state.exportModal.modal} @@ -309,6 +329,11 @@ export default function Calendar({ {...calendarProps} datesSet={datesSet} eventContent={wrappedEventContent} + dayCellClassNames={ + isScrollView + ? monthDayCellClassNames + : calendarProps.dayCellClassNames + } /> diff --git a/src/frontend/src/styles/overrides.css b/src/frontend/src/styles/overrides.css index 8544cbe19d..180cf278e4 100644 --- a/src/frontend/src/styles/overrides.css +++ b/src/frontend/src/styles/overrides.css @@ -3,6 +3,14 @@ padding: 0.35em 0; } +/* Alternating month backgrounds in the multi-month scroll calendar view */ +[data-mantine-color-scheme='light'] .fc-day-month-odd:not(.fc-day-today) { + background-color: var(--mantine-color-gray-1); +} +[data-mantine-color-scheme='dark'] .fc-day-month-odd:not(.fc-day-today) { + background-color: var(--mantine-color-dark-4); +} + /* mantine-datatable overrides */ .mantine-datatable-pointer-cursor, .mantine-datatable-context-menu-cursor {