如何使用(getEventById)与Vue FullCalendar

Question

我想删除 vue fullcalnder 中带有事件 id 的元素，但我不知道该怎么做。 使用jQuery很容易，但我不知道如何使用它，它在文档中有，但我不知道如何将其与Vuejs(https://fullcalendar.io/docs/Calendar-getEventById 一起使用(。

我尝试了很多东西，但结果是一样的！

this.$refs.calendar.$emit('getEventById',4).remove()

this.$refs.calendar.fireMethod().getEventById(4).remove()

感谢您的帮助。

Answer 1

如果您查看文档中名为"访问 FullCalendar 的 API"的部分，https://fullcalendar.io/docs/vue 它显示了如何获取日历对象的实例，您可以从中调用方法。

它显示的示例是：

let calendarApi = this.$refs.fullCalendar.getApi() 
calendarApi.next() 

只需将next()交换为要调用的方法即可。因此，在您的情况下，它可能是这样的：

let calendarApi = this.$refs.fullCalendar.getApi() 
let event = calendarApi.getEventById(4)
event.remove();

Answer 2

events

使用数据模型进行管理，并events进行操作以更新视图。

没有必要使用FullCalendar的 api。

试试这个。

<button @click="removeId">Remove</button>
<FullCalendar
ref="calendar"
defaultView="dayGridMonth"
:plugins="calendarPlugins"
:events="eventsData"
/>

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
export default {
components: {
FullCalendar
},
data () {
return {
eventsData : [
{ id: 1, title: 'event 1', date: '2019-04-01' },
{ id: 2, title: 'event 2', date: '2019-04-02' }
],
calendarPlugins: [ dayGridPlugin ]
}
},
methods: {
removeId () {
let id = 1
let index = this.eventsData.findIndex(e => e.id === id)
this.eventsData.splice(index, 1)
}
}
}