Composant Vue.js FullCalendar v5 - les événements ne s'affichent pas correctement
P粉536909186
P粉536909186 2023-08-28 10:28:13
0
1
440
<p>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. </p> <p>Voici le code : </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Ai-je fait quelque chose de mal ? </p> <p>Merci beaucoup pour votre aide. </p> <p>Meilleurs vœux. </p>
P粉536909186
P粉536909186

répondre à tous(1)
P粉021553460

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 },
],
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal