adam.goldsmith/reservations_display
1
0
Fork 0
Code Issues Pull Requests 1 Activity

Migrate to FullCalendar 5

Browse Source 
also update other deps
This commit is contained in:
Adam Goldsmith 2021-03-31 16:51:48 -04:00
parent b2260df3f1
commit 780b478f07
2 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package.json
View File

@ -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"
}
}

27
src/App.vue
View File

@ -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();