[UI] Calendar month colors (#12157)

Discriminate months which slightly different colors

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
+            }
           />
         </Box>
       </Stack>

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 {