Question

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

我尝试了很多事情，但是结果相同！

(emp_id, att_time)

this.$refs.calendar.$emit('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文档中的“访问FullCalendar的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）

2 个答案: