Vue.js FullCalendar v5-Komponente – Ereignisse werden nicht richtig angezeigt

Question

Kürzlich haben wir die FullCalendar-Komponente im Vue.js-Projekt von Version 4.4.2 auf Version 5.9.0 aktualisiert. Wir sind jedoch auf ein Problem gestoßen, bei dem die Ereignisse nicht angezeigt wurden. Da ich den Grund nicht in der Originaldatei finden konnte, beschloss ich, mit der Erstellung des Kalenders in einer völlig neuen Datei zu beginnen und den Kalender Schritt für Schritt zu erstellen, in der Hoffnung, den Fehler zu finden. Allerdings kann ich die Ereignisse selbst in dieser neuen Datei nicht anzeigen und habe zu diesem Zeitpunkt absolut keine Ahnung, was ich falsch mache. In der Konsole kann ich die Reihe der Ereignisse sehen, aber ich kann sie nicht im Kalender anzeigen.

Hier ist der Code:

<template>
    <b-container fluid @click="logEvents">
        <VueFullCalendar :options="calendarOptions"width: 100%;"
    </b-container>
</template>

<script>
VueFullCalendar aus „@fullcalendar/vue“ importieren
importiere resourcesTimeGrid aus „@fullcalendar/resource-timegrid“
dayGridPlugin aus „@fullcalendar/daygrid“ importieren
timeGridPlugin aus „@fullcalendar/timegrid“ importieren
Interaktions-Plugin aus „@fullcalendar/interaction“ importieren
listPlugin aus „@fullcalendar/list“ importieren

Standard exportieren {
  Komponenten: {
    VueFullCalendar
  },
  Name: 'Kalender',
  Daten: Funktion () {
    zurückkehren {
      Kalenderoptionen: {
        Plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, resourcesTimeGrid, listPlugin],
        headerToolbar: {
          links: 'vorheriges,nächstes heute',
          Mitte: 'Titel',
          rechts: 'dayGridMonth,resourceTimeGridWeek,resourceTimeGridDay'
        },
        initialView: 'resourceTimeGridWeek',
        SlotMinTime: '09:00:00',
        SlotMaxTime: '21:30:00',
        allDaySlot: false,
        Veranstaltungen: [
          {
            Titel: 'Ereignis 2',
            Start: '2021-09-28T09:00',
            Ende: '2021-09-28T10:30'
          },
          {
            Titel: 'Ereignis 1',
            Start: '2021-09-28T11:00',
            Ende: '2021-09-28T13:00'
          }
        ]
      }
    }
  },
  Methoden: {
    logEvents () {
      console.log(this.calendarOptions.events)
    }
  }
}
</script>

<Stil>

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

Habe ich etwas falsch gemacht?

Vielen Dank für Ihre Hilfe.

Alles Gute.

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 },
],