完整日历Vue JS组件-添加事件

Question

我正在使用Vue JS的Full Calendar：https://fullcalendar.io/docs/vue

我似乎找不到使用Full Calendar Vue JS组件添加事件的方法。我看到这些例子的唯一方法是获取日历的API并通过它创建事件。这似乎有点反vue。

文档演示：

handleDateSelect(selectInfo) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay
})
}
}

我想知道，在Vue JS Full Calendar上创建事件的唯一方法是利用日历本地API，如上所示吗？是否没有将某种事件发送到组件的方法？

Answer 1

您实际上不必回退到使用命令式实例API。VueFullCalendar组件将events公开为您可以使用的选项的一部分。例如：

<template>
<FullCalendar :options="opts" />
<button @click="addNewEvent"></button>
</template>

在组件定义中，可以使用events键以声明方式设置事件列表。每次，您都需要添加/删除事件，只需修改作为选项对象一部分的events键即可。

export default {
data() {
return {
opts: {
plugins: [ /* Any addition plugins you need */ ],
initialView: 'dayGridMonth',
events: [
{ title: 'First Event', date: '2021-05-12' },
/* Few more initial events */
]
}
}
},
methods: {
addNewEvent() {
this.opts.events = [
...this.opts.events,
{ title: 'Another Event', date: '2021-05-13' }
];
}
}
}