Prasanna/calendar week functionality

frontend/src/components/pages/schedule/SchedulePage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import {
   Flex,
   Tabs,
@@ -19,15 +19,33 @@ import {
   CalendarMonth,
 } from "@mui/icons-material";
 
+import FullCalendar from "@fullcalendar/react";
+import { CalendarApi } from "@fullcalendar/core";
 import { ScheduleType } from "../../../types/ScheduleTypes";
 import ScheduleListView from "./listView/ScheduleListView";
-import { ScheduleCalendar } from "./calendarView/ScheduleCalendar";
+import ScheduleCalendar from "./calendarView/ScheduleCalendar";
 
 const SchedulePage = (): React.ReactElement => {
   const [rooms, setRooms] = useState<number[]>([]);
   const [scheduleType, setScheduleType] = useState<ScheduleType>("LIST");
   const [scheduleData, setScheduleData] = useState<string>("");
   const [active, setActive] = useState<string>("List");
+  const [dateRange, setDateRange] = useState("Jan 1 - 7");
+
+  const calendarRef = useRef<CalendarApi | null>(null);
+
+  const handleNext = () => {
+    console.log(scheduleType);
+    if (scheduleType === "CALENDAR") {
+      calendarRef.current?.next();
+    }
+  };
+
+  const handlePrev = () => {
+    if (scheduleType === "CALENDAR") {
+      calendarRef.current?.prev();
+    }
+  };
 
   useEffect(() => {
     // TODO: Fetch occupied rooms from API?
@@ -80,6 +98,7 @@ const SchedulePage = (): React.ReactElement => {
 
           <Flex w="200px" flexDir="row" height="100px" ml={5}>
             <IconButton
+              onClick={handlePrev}
               _hover={{
                 cursor: "pointer",
               }}
@@ -96,9 +115,10 @@ const SchedulePage = (): React.ReactElement => {
               size="md"
               fontSize="lg"
             >
-              Jan 1 - 7
+              {dateRange}
             </Button>
             <IconButton
+              onClick={handleNext}
               _hover={{
                 cursor: "pointer",
               }}
@@ -161,7 +181,10 @@ const SchedulePage = (): React.ReactElement => {
       </Flex>
       <Box padding="40px">
         {scheduleType === "CALENDAR" ? (
-          <ScheduleCalendar />
+          <ScheduleCalendar
+            ref={calendarRef}
+            setDateRange={(range: string) => setDateRange(range)}
+          />
         ) : (
           <ScheduleListView />
         )}

frontend/src/components/pages/schedule/calendarView/ScheduleCalendar.tsx

@@ -1,9 +1,15 @@
 import FullCalendar from "@fullcalendar/react";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import { DayHeaderContentArg, EventContentArg } from "@fullcalendar/core";
-import React, { useEffect, useRef } from "react";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
 import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined";
 import "./ScheduleCalendar.css";
+import { ConnectingAirportsOutlined } from "@mui/icons-material";
 
 const events = [
   {
@@ -63,14 +69,54 @@ function renderHeaderContent(date: DayHeaderContentArg) {
   );
 }
 
-export function ScheduleCalendar() {
-  const calendarRef = useRef<any>(null);
+interface ScheduleCalendarProps {
+  setDateRange: (range: string) => void;
+}
+
+interface ScheduleCalendarHandle {
+  next: () => void;
+  prev: () => void;
+}
+
+const ScheduleCalendar = forwardRef<
+  ScheduleCalendarHandle,
+  ScheduleCalendarProps
+>((props, ref) => {
+  const calendarRef = useRef<FullCalendar | null>(null);
+
   const handleAllDayContent = (arg: any) => {
     return <span>{arg.text ? "" : ""}</span>;
   };
+
+  const formatDateRange = (startDate: Date, endDate: Date) => {
+    const startFormat = startDate.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    });
+    const endFormat = endDate.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    });
+
+    if (startDate.getMonth() === endDate.getMonth()) {
+      return `${startFormat} - ${endFormat.split(" ")[1]}`;
+    }
+    return `${startFormat} - ${endFormat}`;
+  };
+
+  useImperativeHandle(ref, () => ({
+    next: () => {
+      if (calendarRef.current) calendarRef.current.getApi().next();
+    },
+    prev: () => {
+      if (calendarRef.current) calendarRef.current.getApi().prev();
+    },
+  }));
+
   return (
     <div>
       <FullCalendar
+        ref={calendarRef}
         plugins={[timeGridPlugin]}
         initialView="timeGridWeek"
         weekends
@@ -88,9 +134,15 @@ export function ScheduleCalendar() {
         eventBackgroundColor="transparent"
         eventBorderColor="transparent"
         slotEventOverlap={false}
+        datesSet={(dateInfo) => {
+          props.setDateRange(formatDateRange(dateInfo.start, dateInfo.end));
+        }}
+        headerToolbar={false}
       />
     </div>
   );
-}
+});
+
+ScheduleCalendar.displayName = "ScheduleCalendar";
 
 export default ScheduleCalendar;