Migrate to FullCalendar 5
also update other deps
This commit is contained in:
parent
b2260df3f1
commit
780b478f07
13
package.json
13
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"
|
||||
}
|
||||
}
|
||||
|
27
src/App.vue
27
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();
|
||||
|
Loading…
Reference in New Issue
Block a user