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