Vue.js FullCalendar v5组件 - 事件无法正常显示
<p>最近我们在Vue.js项目中将FullCalendar组件从版本4.4.2升级到版本5.9.0。然而，我们遇到了事件不显示的问题。由于我无法找到原始文件中的原因，所以我决定在一个全新的文件中开始构建日历，逐步构建日历以希望找到错误。然而，即使在这个新文件中，我也无法显示事件，此时我完全不知道我做错了什么。在控制台中，我可以看到事件数组，但是我无法将它们显示在日历上。</p>
<p>以下是代码：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>我做错了什么吗？</p>
<p>非常感谢您的帮助。</p>
<p>祝好。</p>
1
794
收藏
这是由于日期和时间格式的原因。所以，一旦你管理好它，它就会显示出来。
事件： [ { 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 }, ],