From 780b478f07ef363a787a5e9426af648901bbd37a Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Wed, 31 Mar 2021 16:51:48 -0400
Subject: [PATCH] Migrate to FullCalendar 5

also update other deps
---
 package.json | 13 ++++++-------
 src/App.vue  | 27 +++++++++++++--------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 2ea6cd2..ad557ca 100644
--- a/package.json
+++ b/package.json
@@ -10,22 +10,21 @@
     "@babel/core": "^7.8.7",
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
-    "@types/fullcalendar__vue": "^4.4.0",
     "@vue/component-compiler-utils": "^3.0.0",
     "sass": "^1.23.1",
-    "typescript": "^3.6.4",
+    "typescript": "^4.2.3",
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
-    "@fullcalendar/core": "^4.3.1",
-    "@fullcalendar/google-calendar": "^4.3.0",
-    "@fullcalendar/timegrid": "^4.3.0",
-    "@fullcalendar/vue": "^4.3.1",
+    "@fullcalendar/core": "^5.6.0",
+    "@fullcalendar/google-calendar": "^5.6.0",
+    "@fullcalendar/timegrid": "^5.6.0",
+    "@fullcalendar/vue": "^5.6.0",
     "core-js": "^3.6.4",
     "equicolor": "^1.1.0",
     "intl": "^1.2.5",
     "vue": "^2.6.10",
     "vue-hot-reload-api": "^2.3.4",
-    "vue-property-decorator": "^8.3.0"
+    "vue-property-decorator": "^9.1.2"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 6dd4538..778752a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,17 @@
 <template>
-  <FullCalendar ref="calendar" v-bind="calendarOptions"> </FullCalendar>
+  <FullCalendar ref="calendar" :options="calendarOptions"> </FullCalendar>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import equicolor from 'equicolor';
 
-import FullCalendar, { FullCalendarComponent } from '@fullcalendar/vue';
-import { CalendarProps } from '@fullcalendar/vue/options';
+import FullCalendar from '@fullcalendar/vue';
 import timeGridPlugin from '@fullcalendar/timegrid';
+import dayGridPlugin from '@fullcalendar/daygrid';
 import googleCalendarPlugin from '@fullcalendar/google-calendar';
 
-import '@fullcalendar/core/main.css';
-import '@fullcalendar/daygrid/main.css';
-import '@fullcalendar/timegrid/main.css';
-import { EventInput } from '@fullcalendar/core';
+import { EventInput, CalendarOptions } from '@fullcalendar/core';
 import { Calendar } from '@fullcalendar/core';
 
 const calendars: { [key: string]: string } = {
@@ -27,22 +24,22 @@ const calendars: { [key: string]: string } = {
   room_reservations: 'f4ro53uklj2u6pr0se7ucskm6g@group.calendar.google.com',
 };
 
-const colors = equicolor.findNextColors(
+const colors: string[] = equicolor.findNextColors(
   ['#ffffff', '#000000'],
   Object.keys(calendars).length
 );
 
 @Component({ components: { FullCalendar } })
 export default class App extends Vue {
-  calendarOptions: CalendarProps = {
-    plugins: [timeGridPlugin, googleCalendarPlugin],
+  calendarOptions: CalendarOptions = {
+    plugins: [timeGridPlugin, dayGridPlugin, googleCalendarPlugin],
     allDaySlot: false,
     nowIndicator: true,
-    defaultView: 'timeGridWeek',
+    initialView: 'timeGridWeek',
     height: 'auto',
-    minTime: '8:00',
-    maxTime: '22:00',
     googleCalendarApiKey: 'AIzaSyAQ46fgaqbekkmJqaKR0NCXntaJA6H8JoQ',
+    slotMinTime: '8:00',
+    slotMaxTime: '22:00',
     eventSources: Object.entries(calendars).map(([name, id], idx) => {
       return {
         googleCalendarId: id,
@@ -68,7 +65,9 @@ export default class App extends Vue {
   }
 
   refresh() {
-    const calendarComponent = this.$refs.calendar as FullCalendarComponent;
+    const calendarComponent = this.$refs.calendar as InstanceType<
+      typeof FullCalendar
+    >;
     const calendar = calendarComponent.getApi() as Calendar;
     calendar.getEventSources().map((es) => {
       es.refetch();