Vue.js FullCalendar v5元件 - 事件無法正常顯示

Question

最近我們在Vue.js專案中將FullCalendar元件從版本4.4.2升級到版本5.9.0。然而，我們遇到了事件不顯示的問題。由於我無法找到原始文件中的原因，所以我決定在一個全新的文件中開始建立日曆，逐步建立日曆以希望找到錯誤。然而，即使在這個新文件中，我也無法顯示事件，此時​​我完全不知道我做錯了什麼。在控制台中，我可以看到事件數組，但是我無法將它們顯示在日曆上。

以下是代碼：

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

我做錯了什麼嗎？

非常感謝您的幫忙。

祝好。

Answer 1

這是由於日期和時間格式的原因。所以，一旦你管理好它，它就會顯示出來。

事件：
[
    { 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 },
],