How to use (getEventById) with Vue FullCalendar - vue.js

Question

I want to remove element with Event id in vue fullcalnder but i dont know how i can do it.
with jquery it is easy but i dont know how to use it, it have in documentation but i dont know how i can use it with vuejs (https://fullcalendar.io/docs/Calendar-getEventById).
i try much thing but same result!
this.$refs.calendar.$emit('getEventById',4).remove()
this.$refs.calendar.fireMethod().getEventById(4).remove()
thanks for help.

Answer 1

If you look at the section called "Accessing FullCalendar’s API" in the documentation at https://fullcalendar.io/docs/vue it shows how to get an instance of the calendar object from which you can call methods.
The example it shows is:
let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.next()
You can just swap next() for the method you want to call. So in your case it might be something like:
let calendarApi = this.$refs.fullCalendar.getApi()
let event = calendarApi.getEventById(4)
event.remove();

Answer 2

events is managed with data model and events is manipulated to update view.
It is not necessary to use the api of FullCalendar.
Try this.
<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)
}
}
}