Add periodic refresh of calendar data
This commit is contained in:
parent
4cf3b6c927
commit
f0927638c9
20
src/App.vue
20
src/App.vue
@ -6,7 +6,7 @@
|
|||||||
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 from '@fullcalendar/vue';
|
import FullCalendar, { FullCalendarComponent } from '@fullcalendar/vue';
|
||||||
import { CalendarProps } from '@fullcalendar/vue/options';
|
import { CalendarProps } from '@fullcalendar/vue/options';
|
||||||
import timeGridPlugin from '@fullcalendar/timegrid';
|
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||||
import googleCalendarPlugin from '@fullcalendar/google-calendar';
|
import googleCalendarPlugin from '@fullcalendar/google-calendar';
|
||||||
@ -15,6 +15,7 @@ import '@fullcalendar/core/main.css';
|
|||||||
import '@fullcalendar/daygrid/main.css';
|
import '@fullcalendar/daygrid/main.css';
|
||||||
import '@fullcalendar/timegrid/main.css';
|
import '@fullcalendar/timegrid/main.css';
|
||||||
import { EventInput } from '@fullcalendar/core';
|
import { EventInput } from '@fullcalendar/core';
|
||||||
|
import { Calendar } from '@fullcalendar/core';
|
||||||
|
|
||||||
const calendars: { [key: string]: string } = {
|
const calendars: { [key: string]: string } = {
|
||||||
computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
|
computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
|
||||||
@ -41,10 +42,10 @@ export default class App extends Vue {
|
|||||||
height: 'auto',
|
height: 'auto',
|
||||||
minTime: '8:00',
|
minTime: '8:00',
|
||||||
googleCalendarApiKey: 'AIzaSyAQ46fgaqbekkmJqaKR0NCXntaJA6H8JoQ',
|
googleCalendarApiKey: 'AIzaSyAQ46fgaqbekkmJqaKR0NCXntaJA6H8JoQ',
|
||||||
eventSources: Object.entries(calendars).map(([name, id]) => {
|
eventSources: Object.entries(calendars).map(([name, id], idx) => {
|
||||||
return {
|
return {
|
||||||
googleCalendarId: id,
|
googleCalendarId: id,
|
||||||
color: colors.pop(),
|
color: colors[idx],
|
||||||
eventDataTransform: this.eventDataTransform,
|
eventDataTransform: this.eventDataTransform,
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
@ -60,6 +61,19 @@ export default class App extends Vue {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
created() {
|
||||||
|
// refresh data every five minutes
|
||||||
|
window.setInterval(this.refresh, 5 * 60 * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh() {
|
||||||
|
const calendarComponent = this.$refs.calendar as FullCalendarComponent;
|
||||||
|
const calendar = calendarComponent.getApi() as Calendar;
|
||||||
|
calendar.getEventSources().map((es) => {
|
||||||
|
es.refetch();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
eventDataTransform(eventData: EventInput): EventInput {
|
eventDataTransform(eventData: EventInput): EventInput {
|
||||||
const match = eventData.title.match(/([^\/]*) \/ ([^-]*) - (.*)/);
|
const match = eventData.title.match(/([^\/]*) \/ ([^-]*) - (.*)/);
|
||||||
if (match !== null) {
|
if (match !== null) {
|
||||||
|
Loading…
Reference in New Issue
Block a user