Adds data to calendars

components/HarassmentForm.tsx

@@ -46,6 +46,7 @@ const HarassmentForm = () => {
   );
   const [buttonText, setButtonText] = useState("Submit");
   const [buttonDisabled, setButtonDisabled] = useState(false);
+  // For development only, disable or delete for prod
   const corsProxy: string = "https://cors-anywhere.herokuapp.com/";
 
   const handleSnackbarClose = () => {

components/MonthCalendar.tsx

@@ -1,14 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// remove this later^
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
-import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
 import { useLanguage } from "@/lib/LanguageContext";
+import enLocale from "@fullcalendar/core/locales/en-gb";
 import fiLocale from "@fullcalendar/core/locales/fi";
 import svLocale from "@fullcalendar/core/locales/sv";
-import enLocale from "@fullcalendar/core/locales/en-gb";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import googleCalendarPlugin from "@fullcalendar/google-calendar";
+import FullCalendar from "@fullcalendar/react";
 
 const MonthCalendar = () => {
   const { language } = useLanguage();
@@ -21,8 +17,21 @@ const MonthCalendar = () => {
   return (
     <>
       <FullCalendar
-        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
-        plugins={[dayGridPlugin]}
+        plugins={[dayGridPlugin, googleCalendarPlugin]}
+        eventSources={[
+          {
+            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_1,
+            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+          },
+          {
+            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_2,
+            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+          },
+          {
+            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_3,
+            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+          },
+        ]}
         initialView="dayGridMonth"
         locale={currentLocale}
       />

components/WeekCalendar.tsx

@@ -1,11 +1,13 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// remove this later^
 import { useLanguage } from "@/lib/LanguageContext";
+import { EventApi } from "@fullcalendar/core";
 import enLocale from "@fullcalendar/core/locales/en-gb";
 import fiLocale from "@fullcalendar/core/locales/fi";
 import svLocale from "@fullcalendar/core/locales/sv";
+import googleCalendarPlugin from "@fullcalendar/google-calendar";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/timegrid";
+import { debounce } from "@mui/material";
+import { useCallback, useState } from "react";
 
 const WeekCalendar = () => {
   const { language } = useLanguage();
@@ -15,13 +17,54 @@ const WeekCalendar = () => {
     en: enLocale,
   };
   const currentLocale = localeMap[language] || enLocale;
+
+  const [minTime, setMinTime] = useState("12:00:00");
+  const [maxTime, setMaxTime] = useState("24:00:00");
+
+  // there was way too much empty space, mostly before any events,
+  // this should cut that out and leave a 2hr bufer on either side
+  const adjustTimeRange = useCallback(
+    debounce((events: EventApi[]) => {
+      if (events.length > 0) {
+        const eventTimes = events.map((event) => ({
+          start: new Date(event.startStr).getHours(),
+          end: new Date(event.endStr).getHours(),
+        }));
+
+        const earliestEventStart = Math.min(...eventTimes.map((e) => e.start));
+        const latestEventEnd = Math.max(...eventTimes.map((e) => e.end));
+
+        setMinTime(`${Math.max(earliestEventStart - 2, 0)}:00:00`);
+        setMaxTime(`${Math.min(latestEventEnd + 2, 24)}:00:00`);
+      }
+    }, 300),
+    [],
+  );
+
   return (
     <>
       <FullCalendar
-        schedulerLicenseKey={process.env.FULL_CALENDAR_KEY}
-        plugins={[dayGridPlugin]}
+        plugins={[dayGridPlugin, googleCalendarPlugin]}
+        eventSources={[
+          {
+            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_1,
+            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+          },
+          {
+            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_2,
+            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+          },
+          {
+            googleCalendarId: process.env.NEXT_PUBLIC_CALENDAR_ID_3,
+            googleCalendarApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
+          },
+        ]}
         initialView="timeGridWeek"
         locale={currentLocale}
+        slotMinTime={minTime}
+        slotMaxTime={maxTime}
+        eventsSet={adjustTimeRange}
+        contentHeight="auto"
       />
       <div />
     </>

package.json

@@ -21,6 +21,7 @@
     "@emotion/styled": "^11.11.5",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/google-calendar": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/resource": "^6.1.15",

styles/Navbar.module.css

@@ -1,4 +1,5 @@
 .navContainer {
+  max-width: 2150px;
   width: 100%;
   display: flex;
   justify-content: center;