Use proxied ics files instead of google-calendar api

This means we don't need to expose a google API key to clients

.gitignore

@@ -2,4 +2,3 @@
 /.cache/
 /dist/
 /package-lock.json
-/src/secrets.json

package.json

@@ -16,10 +16,11 @@
   },
   "dependencies": {
     "@fullcalendar/core": "^5.10.0",
-    "@fullcalendar/google-calendar": "^5.6.0",
+    "@fullcalendar/icalendar": "^5.10.1",
     "@fullcalendar/timegrid": "^5.6.0",
     "@fullcalendar/vue3": "^5.10.0",
     "equicolor": "^1.1.0",
+    "ical.js": "github:ekreative/ical.js#var-ical",
     "intl": "^1.2.5",
     "vue": "^3.2.20"
   }

src/App.vue

@@ -14,9 +14,7 @@ import FullCalendar, {
 } from '@fullcalendar/vue3';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import dayGridPlugin from '@fullcalendar/daygrid';
-import googleCalendarPlugin from '@fullcalendar/google-calendar';
-
-import { googleCalendarApiKey } from './secrets.json';
+import iCalendarPlugin from '@fullcalendar/icalendar';
 
 const calendars: { [key: string]: string } = {
   computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
@@ -34,12 +32,11 @@ const colors: string[] = equicolor.findNextColors(
 );
 
 const calendarOptions: CalendarOptions = {
-  plugins: [timeGridPlugin, dayGridPlugin, googleCalendarPlugin],
+  plugins: [timeGridPlugin, dayGridPlugin, iCalendarPlugin],
   allDaySlot: false,
   nowIndicator: true,
   initialView: 'timeGridWeek',
   height: 'auto',
-  googleCalendarApiKey,
   slotMinTime: '8:00',
   slotMaxTime: '22:00',
   businessHours: {
@@ -49,7 +46,8 @@ const calendarOptions: CalendarOptions = {
   },
   eventSources: Object.values(calendars).map((id, idx) => {
     return {
-      googleCalendarId: id,
+      url: "/calendar/ical/" + id + "/public/basic.ics",
+      format: "ics",
       color: colors[idx],
       eventDataTransform: eventDataTransform,
     };

vite.config.ts

@@ -10,4 +10,12 @@ export default defineConfig({
       targets: ['defaults', 'not IE 11', "ios 8.4"]
     }),
   ],
+  server: {
+    proxy: {
+      '/calendar': {
+        target: 'https://calendar.google.com',
+        changeOrigin: true,
+      },
+    },
+  },
 });