After upgrading our FullCalendar component in a Vue.js project from version 4.4.2 to version 5.9.0, we encountered issues with events not displaying. Despite building a new calendar step-by-step in a fresh file in an attempt to troubleshoot, the events still do not appear on the calendar. The console shows the event array, but they simply won't display.
Below is the code snippet:
<template>
<b-container fluid @click="logEvents">
<VueFullCalendar :options="calendarOptions" style="width: 100%; height: 100%;" />
</b-container>
</template>
<script>
import VueFullCalendar from '@fullcalendar/vue'
import resourceTimeGrid from '@fullcalendar/resource-timegrid'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
export default {
components: {
VueFullCalendar
},
name: 'Calendar',
data: function () {
return {
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimeGrid, listPlugin],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,resourceTimeGridWeek,resourceTimeGridDay'
},
initialView: 'resourceTimeGridWeek',
slotMinTime: '09:00:00',
slotMaxTime: '21:30:00',
allDaySlot: false,
events: [
{
title: 'Event 2',
start: '2021-09-28T09:00',
end: '2021-09-28T10:30'
},
{
title: 'Event 1',
start: '2021-09-28T11:00',
end: '2021-09-28T13:00'
}
]
}
}
},
methods: {
logEvents () {
console.log(this.calendarOptions.events)
}
}
}
</script>
<style>
@import '~@fullcalendar/list/main.min.css';
</style>
Any insights into what might be going wrong would be greatly appreciated.
Thank you for your assistance.
Warm regards.