Vue.js FullCalendar v5 component - events are not displayed properly

Question

Recently we upgraded the FullCalendar component from version 4.4.2 to version 5.9.0 in the Vue.js project. However, we ran into an issue where the events were not showing up. Since I couldn't find the reason in the original file, I decided to start building the calendar in a completely new file, building the calendar step by step in hopes of finding the error. However, even in this new file I am unable to display the events and at this point I have absolutely no idea what I am doing wrong. In the console I can see the array of events, but I cannot display them on the calendar.

Here is the code:

<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>

Did I do something wrong?

Thank you very much for your help.

Best wishes.

Answer 1

This is due to the date and time format. So, once you manage it, it will show.

事件：
[
    { id: 10, title: "全天事件", date: new Date('2022-02-25')}
    { id: 20, title: "定时事件", start: new Date(),allDay:true },
    { id: 30, title: "定时事件", start: new Date(),allDay:true },
],