finish calendar changes

uwblueprint · Nov 16, 2024 · 110c5e8 · 110c5e8
1 parent aabbb14
commit 110c5e8
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 9 deletions.
diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx
@@ -30,15 +30,21 @@ const SchedulePage = (): React.ReactElement => {
   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 = () => {
-    calendarRef.current?.next();
+    console.log(scheduleType);
+    if (scheduleType === "CALENDAR") {
+      calendarRef.current?.next();
+    }
   };
-  
+
   const handlePrev = () => {
-    calendarRef.current?.prev();
+    if (scheduleType === "CALENDAR") {
+      calendarRef.current?.prev();
+    }
   };
 
   useEffect(() => {
@@ -109,7 +115,7 @@ const SchedulePage = (): React.ReactElement => {
               size="md"
               fontSize="lg"
             >
-              Jan 1 - 7
+              {dateRange}
             </Button>
             <IconButton
               onClick={handleNext}
@@ -175,7 +181,10 @@ const SchedulePage = (): React.ReactElement => {
       </Flex>
       <Box padding="40px">
         {scheduleType === "CALENDAR" ? (
-          <ScheduleCalendar ref={calendarRef} />
+          <ScheduleCalendar
+            ref={calendarRef}
+            setDateRange={(range: string) => setDateRange(range)}
+          />
         ) : (
           <ScheduleListView />
         )}

diff --git a/frontend/src/components/pages/schedule/calendarView/ScheduleCalendar.tsx b/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, { forwardRef, useEffect, useImperativeHandle, 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,13 +69,41 @@ function renderHeaderContent(date: DayHeaderContentArg) {
   );
 }
 
-const ScheduleCalendar = forwardRef((_, ref) => {
+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();
@@ -78,10 +112,11 @@ const ScheduleCalendar = forwardRef((_, ref) => {
       if (calendarRef.current) calendarRef.current.getApi().prev();
     },
   }));
+
   return (
     <div>
       <FullCalendar
-        ref = {calendarRef}
+        ref={calendarRef}
         plugins={[timeGridPlugin]}
         initialView="timeGridWeek"
         weekends
@@ -99,10 +134,14 @@ const ScheduleCalendar = forwardRef((_, ref) => {
         eventBackgroundColor="transparent"
         eventBorderColor="transparent"
         slotEventOverlap={false}
+        datesSet={(dateInfo) => {
+          props.setDateRange(formatDateRange(dateInfo.start, dateInfo.end));
+        }}
+        headerToolbar={false}
       />
     </div>
   );
-})
+});
 
 ScheduleCalendar.displayName = "ScheduleCalendar";