able to get some calendar events to showup on cmucal, working on styling

backend/api/app.py

@@ -141,9 +141,9 @@ def check_credentials():
         return jsonify({"authenticated": False, "message": "No credentials found"}), 401
 
 
-@app.route("/get_user_calendar")
-def get_user_calendar():
-    # print('session in get_user_calendar', session);
+@app.route("/get_gcal_events", methods=["GET"])
+def get_gcal_events():
+    # print('session in get_gcal_events', session);
 
     if "credentials" not in session:
         return jsonify({"error": "User not authenticated"}), 401
@@ -171,7 +171,7 @@ def get_user_calendar():
             service.events()
             .list(
                 calendarId="primary",
-                timeMin="2024-12-01T00:00:00Z",  # Replace with your desired time range
+                timeMin="2025-01-10T00:00:00Z",  # Replace with your desired time range
                 maxResults=10,
                 singleEvents=True,
                 orderBy="startTime",

frontend/src/components/calendar/Calendar.tsx

@@ -13,12 +13,15 @@ import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { RemoveFCEventType } from "../../types";
 
+import axios from "axios";
+axios.defaults.withCredentials = true; // Enable cookies for all requests
+
 // https://codesandbox.io/s/react-fullcalendar-custom-buttons-and-header-toolbar-rmvtl?file=/src/App.js
 
 function renderEventContent(eventContent: EventContentArg) {
     return (
-      <div className={`w-full ${eventContent.event.allDay ? 'bg-green': 'bg-green'}`}>
-        
+      <div className={`w-full`}> 
+      {/* ${eventContent.event.allDay ? 'bg-green': 'bg-green'} */}
         <p className="w-full truncate ..."><b>{eventContent.timeText}</b> {eventContent.event.title}</p>
       </div>
     )
@@ -29,16 +32,18 @@ function renderEventContent(eventContent: EventContentArg) {
 interface CalendarProps {
   showSearchBar: boolean;
   events: any[];
+  setEvents: React.Dispatch<React.SetStateAction<any[]>>;
   calendarRef: RefObject<FullCalendar>;
   handleRemoveFCEvent: RemoveFCEventType;
 }
 
-export default function Calendar({showSearchBar, events, calendarRef, handleRemoveFCEvent}:CalendarProps) {
+export default function Calendar({showSearchBar, events, setEvents, calendarRef, handleRemoveFCEvent}:CalendarProps) {
 
     const [weekendsVisible, setWeekendsVisible] = useState<boolean>(true);
     const [currentEvents, setCurrentEvents] = useState<EventApi[]>();
     const [currView, setCurrView] = useState<string>('dayGridMonth');
     const [showGCal, setShowGCal] = useState<boolean>(false);
+    // const [gCalEvents, setGCalEvents] = useState<any[]>([]);
 
     // console.log(events);
 
@@ -56,6 +61,38 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo
       }
     };
 
+    const toggleGCalEvents = async () => {
+      if (!showGCal) {
+        try {
+          const response = await fetch("http://localhost:8000/get_gcal_events", {
+            credentials: "include",
+          });
+
+          if (response.status === 401) {
+            window.location.href = "http://localhost:8000/login"; // Redirect to login
+          } else {
+            const gCalEvents = await response.json();
+            const formattedGCalEvents = gCalEvents.map((event: any) => ({
+              title: event.summary,
+              start: event.start.dateTime || event.start.date,
+              end: event.end.dateTime || event.end.date,
+              classNames: ["gcal-event"], // Add a custom class for styling
+            }));
+            setEvents((prev) => [...prev, ...formattedGCalEvents]);
+          }
+        } catch (error) {
+          console.error("Error fetching events:", error);
+        }
+      } else {
+        // Remove GCal events by filtering out those with the "gcal-event" class
+      setEvents((prev) => prev.filter((event) => !event.classNames?.includes("gcal-event")));
+      }
+
+      setShowGCal((prev) => !prev);
+    };
+
+
+
     useEffect(() => {
       updateButtonStyles();
     }, [showGCal]);
@@ -142,7 +179,7 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo
               },
               GCalBtn: {
                 text: `${showGCal? 'Hide GCal events': 'Show GCal events'}`,
-                click: () => {setShowGCal((prev)=> !prev)}
+                click: toggleGCalEvents,
               }
             }}
 

frontend/src/components/calendar/index.css

@@ -5,6 +5,37 @@
   margin: 0 auto;
 }
 
+/* event blocks */
+.fc-event.gcal-event {
+  border: 2px solid #182C4B !important;
+  /* background-color: white !important; */
+  /* color: #182C4B !important; */
+}
+
+.fc-event.cmu-cal-event {
+  border: 3px solid #719F94 !important;
+  /* background-color: white !important; */
+  color: white !important;
+}
+
+
+
+.fc-event.gcal-event.fc-daygrid-event { /* full-day events, where allDay:true in events */
+  background-color: #182C4B !important; 
+}
+
+.fc-event.gcal-event.fc-timegrid-event { /* hour-specific events */
+  border: 2px solid #182C4B !important;
+}
+
+.fc-dayGridMonth {
+
+}
+
+.fc-timeGridWeek {
+
+}
+
 /* .fc-GCalBtn-button {
   background-color: #007bff; 
   color: white;            

frontend/src/pages/Home.tsx

@@ -21,7 +21,7 @@ const Home: React.FC = () => {
 
 	useEffect(() => {
 		axios
-			.get("http://localhost:8000/get_user_calendar", { withCredentials: true })
+			.get("http://localhost:8000/get_gcal_events", { withCredentials: true })
 			.then((response) => {
 				console.log("User authenticated:", response.data);
 			})
@@ -82,6 +82,7 @@ const Home: React.FC = () => {
 				start: start,
 				end: end,
 				allDay: allDay,
+				classNames: ["cmu-cal-event"],
 				searchCardId: searchCardId,
 			},
 		];
@@ -140,6 +141,7 @@ const Home: React.FC = () => {
 						<Calendar
 							showSearchBar={showSearchBar}
 							events={events}
+							setEvents={setEvents}
 							calendarRef={calendarRef}
 							handleRemoveFCEvent={handleRemoveFCEvent}
 						/>

frontend/vite.config.js

@@ -32,7 +32,7 @@ export default defineConfig({
         "**/*.types.ts",
         "src/routes/",
         "src/handlers/",
-        "src/components/page",
+        "src/components/page"
       ],
     },
     global: true,