Set calendar week to start on Monday (#94)

__test__/components/MiniCalendarColor.test.tsx

@@ -56,16 +56,23 @@ describe("MiniCalendar", () => {
     expect(todayTile?.parentElement).toHaveClass("today");
   });
 
-  it("renders mini calendar with the week in gray (except for today) when full calendar in week view", async () => {
+  it.each([
+  { today: new Date(2025, 8, 1), label: "Monday 1 Sept 2025" },
+  { today: new Date(2025, 8, 3), label: "Wednesday 3 Sept 2025" },
+  { today: new Date(2025, 8, 7), label: "Sunday 7 Sept 2025" },
+  ])(
+  "renders mini calendar with the week in gray (except for today) when today is $label",
+  ({ today }) => {
+    jest.useFakeTimers();
+    jest.setSystemTime(today);
+
     renderCalendar();
 
-    const today = new Date();
+    const monday = new Date(2025, 8, 1); // Monday Sept 1
-    const sunday = new Date(today);
-    sunday.setDate(today.getDate() - today.getDay());
 
     for (let i = 0; i < 7; i++) {
-      const date = new Date(sunday);
+      const date = new Date(monday);
-      date.setDate(sunday.getDate() + i);
+      date.setDate(monday.getDate() + i);
       const dateTestId = `date-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
       
       const tile = screen.getByTestId(dateTestId);
@@ -74,6 +81,8 @@ describe("MiniCalendar", () => {
         expect(tile?.parentElement).toHaveClass("selectedWeek");
       }
     }
+
+    jest.useRealTimers();
   });
 
   it("renders mini calendar with the day in gray (except for today) when full calendar in day view", async () => {

src/components/Calendar/Calendar.tsx

@@ -33,6 +33,13 @@ import ClearIcon from "@mui/icons-material/Clear";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import { userAttendee } from "../../features/User/userDataTypes";
 
+const computeStartOfTheWeek = (date: Date): Date => {
+  const startOfWeek = new Date(date);
+  startOfWeek.setDate(date.getDate() - ((date.getDay() + 6) % 7)); // Monday
+  startOfWeek.setHours(0, 0, 0, 0); 
+  return startOfWeek;
+};
+
 export default function CalendarApp() {
   const calendarRef = useRef<CalendarApi | null>(null);
   const [selectedDate, setSelectedDate] = useState(new Date());
@@ -169,7 +176,7 @@ export default function CalendarApp() {
         </div>
         <ReactCalendar
           key={selectedMiniDate.toDateString()}
-          calendarType="gregory"
+          calendarType="iso8601"
           formatShortWeekday={(locale, date) =>
             date.toLocaleDateString(locale, { weekday: "narrow" })
           }
@@ -196,12 +203,11 @@ export default function CalendarApp() {
               calendarRef.current?.view.type === "timeGridWeek" ||
               calendarRef.current?.view.type === undefined
             ) {
-              const startOfWeek = new Date(selected);
+
-              startOfWeek.setDate(selected.getDate() - selected.getDay()); // Sunday
+              const startOfWeek = computeStartOfTheWeek(selected);
-              startOfWeek.setHours(0, 0, 0, 0);
 
               const endOfWeek = new Date(startOfWeek);
-              endOfWeek.setDate(startOfWeek.getDate() + 6); // Saturday
+              endOfWeek.setDate(startOfWeek.getDate() + 6); // Sunday
               endOfWeek.setHours(23, 59, 59, 999);
 
               if (date <= endOfWeek && date >= startOfWeek) {
@@ -254,6 +260,7 @@ export default function CalendarApp() {
           }}
           plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
           initialView="timeGridWeek"
+          firstDay={1}
           editable={true}
           selectable={true}
           timeZone="local"