如何在 Vue FullCalendar 中使用 (getEventById)

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

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)
    }
  }
}

Answer 2

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

它显示的例子是：

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

您可以将 next() 换成您要调用的方法。所以在你的情况下它可能是这样的：

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

如何在 Vue FullCalendar 中使用 (getEventById)

How to use (getEventById) with Vue FullCalendar

fullcalendar

vue.js

vue-component

fullcalendar-4