Composant Vue.js FullCalendar v5 - les événements ne s'affichent pas correctement

Question

Récemment, nous avons mis à niveau le composant FullCalendar de la version 4.4.2 vers la version 5.9.0 dans le projet Vue.js. Cependant, nous avons rencontré un problème où les événements n'apparaissaient pas. Comme je n'ai pas trouvé la raison dans le fichier d'origine, j'ai décidé de commencer à créer le calendrier dans un tout nouveau fichier, en construisant le calendrier étape par étape dans l'espoir de trouver l'erreur. Cependant, même dans ce nouveau fichier, je ne parviens pas à afficher les événements et à ce stade, je n'ai absolument aucune idée de ce que je fais de mal. Dans la console, je peux voir la liste des événements, mais je ne peux pas les afficher sur le calendrier.

Voici le code :

<template>
    <b-fluide du conteneur @click="logEvents">
        <VueFullCalendar :options="calendarOptions" style="largeur : 100 %;"
    </b-conteneur>
</modèle>

<script>
importer VueFullCalendar depuis '@fullcalendar/vue'
importer ResourceTimeGrid depuis '@fullcalendar/resource-timegrid'
importer dayGridPlugin depuis '@fullcalendar/daygrid'
importer timeGridPlugin depuis '@fullcalendar/timegrid'
importer interactionPlugin depuis '@fullcalendar/interaction'
importer listPlugin depuis '@fullcalendar/list'

exporter par défaut {
  Composants: {
    VueCalendrierComplet
  },
  nom : 'Calendrier',
  données : fonction () {
    retour {
      Options du calendrier : {
        plugins : [dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimeGrid, listPlugin],
        barre d'outils d'en-tête : {
          à gauche : 'précédent, suivant aujourd'hui',
          centre : 'titre',
          à droite : 'dayGridMonth,resourceTimeGridWeek,resourceTimeGridDay'
        },
        initialView : 'resourceTimeGridWeek',
        slotMinTime : '09:00:00',
        slotMaxTime : '21:30:00',
        allDaySlot : faux,
        événements: [
          {
            titre : 'Événement 2',
            début : '2021-09-28T09:00',
            fin : '2021-09-28T10:30'
          },
          {
            titre : 'Événement 1',
            début : '2021-09-28T11:00',
            fin : '2021-09-28T13:00'
          }
        ]
      }
    }
  },
  méthodes : {
    logEvents () {
      console.log(this.calendarOptions.events)
    }
  }
}
</script>

<style>

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

Ai-je fait quelque chose de mal ?

Merci beaucoup pour votre aide.

Meilleurs vœux.

Answer 1

Cela est dû au format de la date et de l'heure. Donc, une fois que vous l’aurez géré, cela se verra.

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