Update events in calendar after change in variable – Fullcalendar

Using Fullcalendar with Vue.js, I’m passing the initial events from a variable, but I need that after this variable is updated, the events were updated in the calendar also. The documentation seems to be clear about that:

But I’ve tried this and nothing happens, the events keeps as the first renderization.
Also I’ve looked in many SO related answers about this topic but most of them are applied with JQuery which is not my case.
I can’t figure out how to aply this in a correct way.
Thanks in advance for your attention…

My code to create the calendar:

<FullCalendar :options="calendarOptions" ref="fullCalendar"/>

data() {
    return {
      calendarOptions: {
        firstDay: new Date().getDay(),
        plugins: [timeGridPlugin, interactionPlugin],
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev,next'
        },
        initialView: 'timeGridWeek',
        slotMinTime: "09:00:00",
        slotMaxTime: "20:00:00",
        height: "1070px",
        expandRows: true ,
        dayHeaderFormat: { weekday: 'narrow', day: 'numeric' },
        events: displayEvents
      },
      ...

The function that update the variable:

getEvents() {
    this.displayEvents = [
        {
                id: 1,
                title: "TEST1",
                start: "2021-03-29 09:00:00",
                end: "2021-03-29 11:00:00",
                backgroundColor: "#FF5733"
        },
        {
                id: 2,
                title: "TEST2",
                start: "2021-03-29 10:00:00",
                end: "2021-03-29 11:05:00",
                backgroundColor: "#0053B8"
        },
    ]
    let calendarApi = this.$refs.fullCalendar.getApi()
    calendarApi('refetchEvents')
    this.$refs.fullCalendar('refetchEvents')
}

(displayEvents came from another javascript file utils.js, and after execute the function it is modified)

UPDATE: I found that I was calling the .fullCalendar('refetchEvents') method in an incorrect way. Now I’m calling it as it:

let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.refetchEvents()

But still the changes aren’t reflected in the calendar after this.

Answer

Your events don’t update because you’re using a static event source – that array was copied to fullCalendar when it was initialised. Updates to it have no effect on the calendar because fullCalendar is using a different, older copy of the array.

And fullCalendar has no way to refetch anything because you didn’t give it a source to fetch from. If you want re-fetching to work then you need to provide a dynamic event source. There are two techniques you can use to do that, both described in detail in the documentation:

1. Events as a JSON feed – where you simply specify a URL which will return JSON event data directly. fullCalendar will call this URL whenever the date changes – or whenever you call refetchEvents – and pass the current start and end dates of the calendar as query parameters, so the server can return a list of events correctly filtered by date.

2. Events as a function – where you provide a callback function which fullCalendar will call whenever the date changes – or whenever you call refetchEvents – and passes the current start and end date as parameters to the function. The function can then do whatever you want in order to fetch events – e.g. make a custom AJAX call, or call another function or whatever. When the events are ready you pass them back to fullCalendar using the “successCallback” function supplied as a parameter to the main callback. There’s an example in the documentation.