Как использовать (getEventById) с Vue FullCalendar

Question

Я хочу удалить элемент с идентификатором события в vue fullcalnder, но я не знаю, как я могу это сделать. с jquery это легко, но я не знаю, как его использовать, это есть в документации, но я не знаю, как я могу использовать его с vuejs (https://fullcalendar.io/docs/Calendar-getEventById).

я много чего пробую, но результат тот же!

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

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

спасибо за помощь.

Answer 1

Если вы посмотрите на раздел «Доступ к API FullCalendar» в документации по адресу 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 управляется для обновления представления.

Нет необходимости использовать API FullCalendar.

Попробуйте это.

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