Komponen Vue.js FullCalendar v5 - acara tidak dipaparkan dengan betul

Question

Baru-baru ini kami telah meningkatkan komponen FullCalendar daripada versi 4.4.2 kepada versi 5.9.0 dalam projek Vue.js. Walau bagaimanapun, kami menghadapi isu di mana acara tidak muncul. Memandangkan saya tidak dapat mencari sebab dalam fail asal, saya memutuskan untuk mula membina kalendar dalam fail baharu sepenuhnya, membina kalendar langkah demi langkah dengan harapan dapat mencari ralat. Walau bagaimanapun, walaupun dalam fail baru ini saya tidak dapat memaparkan peristiwa dan pada ketika ini saya sama sekali tidak tahu apa yang saya lakukan salah. Dalam konsol saya boleh melihat pelbagai acara, tetapi saya tidak boleh memaparkannya pada kalendar.

Berikut ialah kod:

<template>
    <b-bekas cecair @click="logEvents">
        <VueFullCalendar :options="calendarOptions"style="lebar: 100%;"
    </b-bekas>
</template>

<skrip>
import VueFullCalendar daripada '@fullcalendar/vue'
import resourceTimeGrid daripada '@fullcalendar/resource-timegrid'
import dayGridPlugin daripada '@fullcalendar/daygrid'
import timeGridPlugin daripada '@fullcalendar/timegrid'
import interactionPlugin daripada '@fullcalendar/interaction'
import listPlugin daripada '@fullcalendar/list'

eksport lalai {
  komponen: {
    VueFullCalendar
  },
  nama: 'Kalendar',
  data: fungsi () {
    kembali {
      Pilihan kalendar: {
        pemalam: [dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimeGrid, listPlugin],
        headerToolbar: {
          kiri: 'sebelumnya, hari ini seterusnya',
          pusat: 'tajuk',
          kanan: 'dayGridMonth,resourceTimeGridWeek,resourceTimeGridDay'
        },
        initialView: 'resourceTimeGridWeek',
        slotMinMasa: '09:00:00',
        slotMaxMasa: '21:30:00',
        allDaySlot: palsu,
        peristiwa: [
          {
            tajuk: 'Acara 2',
            mula: '2021-09-28T09:00',
            tamat: '2021-09-28T10:30'
          },
          {
            tajuk: 'Acara 1',
            mula: '2021-09-28T11:00',
            tamat: '2021-09-28T13:00'
          }
        ]
      }
    }
  },
  kaedah: {
    logEvents () {
      console.log(this.calendarOptions.events)
    }
  }
}
</skrip>

<gaya>

@import '~@fullcalendar/list/main.min.css';
</style>

Adakah saya melakukan sesuatu yang salah?

Terima kasih banyak atas bantuan anda.

Salam sejahtera.

Answer 1

Ini disebabkan format tarikh dan masa. Jadi, sebaik sahaja anda menguruskannya, ia akan dipaparkan.

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