Vue.js FullCalendar v5 组件 - 未显示事件答案

【问题标题】：Vue.js FullCalendar v5 component - events not displayingVue.js FullCalendar v5 组件 - 未显示事件
【发布时间】：2021-09-28 12:41:22
【问题描述】：

最近我们将 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>

关于我做错了什么的想法？

非常感谢您。

亲切的问候。

【问题讨论】：

同样的情况，也尝试将一系列事件直接加载到events 属性中：仍然没有

标签： javascript vue.js events fullcalendar-5

【解决方案1】：

这都是因为日期和时间格式。所以，一旦你管理它，它就会显示出来。

events: 
[
    { id: 10, title: "All day event", date: new Date('2022-02-25')}
    { id: 20, title: "Timed event", start: new Date(),allDay:true },
    { id: 30, title: "Timed event", start: new Date(),allDay:true },
],

【讨论】：