[#30] Load data for the current month

src/components/Calendar/Calendar.tsx

@@ -14,6 +14,10 @@ import { CalendarEvent } from "../../features/Events/EventsTypes";
 import CalendarSelection from "./CalendarSelection";
 import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
 import ImportAlert from "../../features/Events/ImportAlert";
+import {
+  formatDateToYYYYMMDDTHHMMSS,
+  getCalendarRange,
+} from "../../utils/dateUtils";
 
 export default function CalendarApp() {
   const calendarRef = useRef<CalendarApi | null>(null);
@@ -40,12 +44,17 @@ export default function CalendarApp() {
 
       const isEmpty = events.length === 0;
       const notFetched = !fetchedIdsRef.current.has(id);
+      const calendarRange = getCalendarRange(selectedDate);
 
       if (isEmpty && notFetched && !pending) {
         dispatch(
           getCalendarDetailAsync({
             access_token: tokens.access_token,
             calId: id,
+            match: {
+              start: formatDateToYYYYMMDDTHHMMSS(calendarRange.start),
+              end: formatDateToYYYYMMDDTHHMMSS(calendarRange.end),
+            },
           })
         );
         fetchedIdsRef.current.add(id);
@@ -53,23 +62,6 @@ export default function CalendarApp() {
     });
   }, [selectedCalendars, calendars, pending, tokens.access_token, dispatch]);
 
-  const [date, setDate] = useState(new Date());
-
-  const months = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
   const [selectedRange, setSelectedRange] = useState<DateSelectArg | null>(
@@ -92,25 +84,39 @@ export default function CalendarApp() {
         <div className="calendar-label">
           <div className="calendar-label">
             <span>
-              {months[date.getMonth()]} {date.getFullYear()}
+              {selectedDate.toLocaleDateString("us-us", {
+                month: "long",
+                year: "numeric",
+              })}
             </span>
           </div>
           <button
             onClick={() =>
-              setDate(new Date(date.getFullYear(), date.getMonth() - 1))
+              setSelectedDate(
+                new Date(
+                  selectedDate.getFullYear(),
+                  selectedDate.getMonth() - 1
+                )
+              )
             }
           >
             &lt;
           </button>
           <button
             onClick={() =>
-              setDate(new Date(date.getFullYear(), date.getMonth() + 1))
+              setSelectedDate(
+                new Date(
+                  selectedDate.getFullYear(),
+                  selectedDate.getMonth() + 1
+                )
+              )
             }
           >
             &gt;
           </button>
         </div>
         <ReactCalendar
+          key={selectedDate.toDateString()}
           showNeighboringMonth={false}
           calendarType="hebrew"
           formatShortWeekday={(locale, date) =>
@@ -163,6 +169,12 @@ export default function CalendarApp() {
             minute: "2-digit",
             hour12: false,
           }}
+          datesSet={(arg) => {
+            const today = new Date();
+            setSelectedDate(
+              today > arg.start && today < arg.end ? today : arg.start
+            );
+          }}
           dayHeaderContent={(arg) => {
             const date = arg.date.getDate();
             const weekDay = arg.date

src/features/Calendars/CalendarApi.ts

@@ -14,7 +14,12 @@ export async function getCalendars(userId: string, opaque_token: string) {
   return calendars;
 }
 
-export async function getCalendar(id: string, opaque_token: string) {
+export async function getCalendar(
+  id: string,
+  opaque_token: string,
+  match: { start: string; end: string }
+) {
+  console.log(match)
   const response = await fetch(
     `${(window as any).CALENDAR_BASE_URL}/dav/calendars/${id}.json`,
     {
@@ -24,7 +29,7 @@ export async function getCalendar(id: string, opaque_token: string) {
         Authorization: `Bearer ${opaque_token}`,
       },
       body: JSON.stringify({
-        match: { start: "20250525T000000", end: "20250708T000000" },
+        match,
       }),
     }
   );

src/features/Calendars/CalendarSlice.ts

@@ -32,9 +32,9 @@ export const getCalendarsListAsync = createAsyncThunk<
 
 export const getCalendarDetailAsync = createAsyncThunk<
   { calId: string; events: CalendarEvent[] }, // Return type
-  { access_token: string; calId: string } // Arg type
->("calendars/getCalendarDetails", async ({ access_token, calId }) => {
-  const calendar = await getCalendar(calId, access_token);
+  { access_token: string; calId: string; match: { start: string; end: string } } // Arg type
+>("calendars/getCalendarDetails", async ({ access_token, calId, match }) => {
+  const calendar = await getCalendar(calId, access_token, match);
   const color = calendar["apple:color"];
   const events: CalendarEvent[] = calendar._embedded["dav:item"].map(
     (eventdata: any) => {
@@ -104,7 +104,9 @@ const CalendarSlice = createSlice({
               events: [] as CalendarEvent[],
             } as Calendars;
           }
-          state.list[action.payload.calId].events = action.payload.events;
+          action.payload.events.forEach((event) => {
+            state.list[action.payload.calId].events.push(event);
+          });
           state.list[action.payload.calId].events.forEach((event) => {
             event.color = state.list[action.payload.calId].color;
           });

src/utils/dateUtils.ts

@@ -0,0 +1,29 @@
+export function formatDateToYYYYMMDDTHHMMSS(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}${month}${day}T000000`;
+}
+
+export function getCalendarRange(date = new Date()) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  const firstOfMonth = new Date(year, month, 1);
+  const dayOfWeekStart = firstOfMonth.getDay();
+  const diffToMonday = (dayOfWeekStart + 6) % 7;
+  const startDate = new Date(firstOfMonth);
+  startDate.setDate(firstOfMonth.getDate() - diffToMonday);
+
+  const lastOfMonth = new Date(year, month + 1, 0);
+  const dayOfWeekEnd = lastOfMonth.getDay();
+
+  const diffToSunday = (7 - dayOfWeekEnd) % 7;
+  const endDate = new Date(lastOfMonth);
+  endDate.setDate(lastOfMonth.getDate() + diffToSunday);
+
+  return {
+    start: startDate,
+    end: endDate,
+  };
+}