From cd225689314389de7dd776dc02cfcf90217a1648 Mon Sep 17 00:00:00 2001 From: Stephen Swanson Date: Tue, 10 Sep 2024 17:21:51 +0300 Subject: [PATCH] Adds data to calendars --- components/HarassmentForm.tsx | 1 + components/MonthCalendar.tsx | 29 +++++++++++++------- components/WeekCalendar.tsx | 51 ++++++++++++++++++++++++++++++++--- package-lock.json | 10 +++++++ package.json | 1 + styles/Navbar.module.css | 1 + 6 files changed, 79 insertions(+), 14 deletions(-) diff --git a/components/HarassmentForm.tsx b/components/HarassmentForm.tsx index 60c09e6..be4c17b 100644 --- a/components/HarassmentForm.tsx +++ b/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 = () => { diff --git a/components/MonthCalendar.tsx b/components/MonthCalendar.tsx index 9ef0a01..d2824dd 100644 --- a/components/MonthCalendar.tsx +++ b/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 ( <> diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx index dc4abc5..0f7b3d6 100644 --- a/components/WeekCalendar.tsx +++ b/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 ( <>
diff --git a/package-lock.json b/package-lock.json index d187317..a69820a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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", @@ -1185,6 +1186,15 @@ "@fullcalendar/core": "~6.1.15" } }, + "node_modules/@fullcalendar/google-calendar": { + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/@fullcalendar/google-calendar/-/google-calendar-6.1.15.tgz", + "integrity": "sha512-u1EB/fx24f1GouOwsNo8qIobSrFNi5t2gChumpzR8zbCVUNEx1yOShs7i84WAFuiFHxfiFpuGQ5tvc1aAE1pHg==", + "license": "MIT", + "peerDependencies": { + "@fullcalendar/core": "~6.1.15" + } + }, "node_modules/@fullcalendar/interaction": { "version": "6.1.15", "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz", diff --git a/package.json b/package.json index d21cd05..6399b0d 100644 --- a/package.json +++ b/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", diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css index 5c0c255..aba8e0e 100644 --- a/styles/Navbar.module.css +++ b/styles/Navbar.module.css @@ -1,4 +1,5 @@ .navContainer { + max-width: 2150px; width: 100%; display: flex; justify-content: center;