如何在 Vue FullCalendar 中使用 (getEventById)答案

【问题标题】：How to use (getEventById) with Vue FullCalendar如何在 Vue FullCalendar 中使用 (getEventById)
【发布时间】：2019-10-10 03:32:47
【问题描述】：

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

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

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

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

感谢您的帮助。

【问题讨论】：

谢谢亲爱的，让@ADyson 你的评论解决了我的问题，非常感谢

标签： vue.js fullcalendar vue-component fullcalendar-4

【解决方案1】：

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

它显示的例子是：

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

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

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

【讨论】：

【解决方案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)
    }
  }
}

【讨论】：