Full Calendar Vue JS Component - Adding Events

Question

I'm using Full Calendar with Vue JS: https://fullcalendar.io/docs/vue

I can't seem to find a way to add events using the Full Calendar Vue JS component. The only way I see the examples doing it is by getting ahold of the calendar's API and creating events through it. This seems a little anti-vue.

Demo from docs:

 handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    }

I'm wondering, is the only way to create an event on the Vue JS Full Calendar by tapping into the calendars native API as shown above? Are there no means of sending an event of sorts into the component?

score 2 · Accepted Answer · answered May 12 '21 at 04:52

You don't really have to fallback to using imperative instance API. The Vue FullCalendar components exposes the events as part of the options which you can use. For example:

<template>
  <FullCalendar :options="opts" />
  <button @click="addNewEvent"></button>
</template>

In the component definition, you can use the events key to set list of events declaratively. Every time, you need to add/remove the events just modify the events key which is part of your options object.

export default {
  data() {
    return {
      opts: {
        plugins: [ /* Any addition plugins you need */ ],
        initialView: 'dayGridMonth',
        events: [
          { title: 'First Event', date: '2021-05-12' },
          /* Few more initial events */
        ]
      }
    }
  },
  methods: {
    addNewEvent() {
      this.opts.events = [
        ...this.opts.events,
        { title: 'Another Event', date: '2021-05-13' }
      ];
    }
  }
}

Full Calendar Vue JS Component - Adding Events

1 Answers1