CODEWITHSUNDEEP
vue.jsfullcalendarvue-componentfullcalendar-4
Govar
Govar

Reputation: 124

How to use (getEventById) with Vue FullCalendar

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.

Upvotes: 0

Views: 2086

Answers (2)

ADyson
ADyson

Reputation: 61859

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();

Upvotes: 2

Dev.DY
Dev.DY

Reputation: 455

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

Upvotes: 1

Related Questions