From 54709ac99472ad12b064d4777974a44b556a341e Mon Sep 17 00:00:00 2001
From: DNgMinh <40620420+DNgMinh@users.noreply.github.com>
Date: Tue, 9 Sep 2025 20:35:39 +0700
Subject: [PATCH] Set calendar week to start on Monday (#94)

---
 .../components/MiniCalendarColor.test.tsx     | 23 +++++++++++++------
 src/components/Calendar/Calendar.tsx          | 17 ++++++++++----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/__test__/components/MiniCalendarColor.test.tsx b/__test__/components/MiniCalendarColor.test.tsx
index 6aff578..3a2daee 100644
--- a/__test__/components/MiniCalendarColor.test.tsx
+++ b/__test__/components/MiniCalendarColor.test.tsx
@@ -56,24 +56,33 @@ 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 sunday = new Date(today);
-    sunday.setDate(today.getDate() - today.getDay());
+    const monday = new Date(2025, 8, 1); // Monday Sept 1
 
     for (let i = 0; i < 7; i++) {
-      const date = new Date(sunday);
-      date.setDate(sunday.getDate() + i);
+      const date = new Date(monday);
+      date.setDate(monday.getDate() + i);
       const dateTestId = `date-${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
-
+      
       const tile = screen.getByTestId(dateTestId);
 
       if (date.getTime() !== today.setHours(0, 0, 0, 0)) {
         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 () => {
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index d8a631a..5488380 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/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
-              startOfWeek.setHours(0, 0, 0, 0);
+
+              const startOfWeek = computeStartOfTheWeek(selected);
 
               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"