Fullcalendar.getEvents() doesn't show the just added- or still show the removed- event?

Question

I'm working on a application which is using the full calendar component. Events can be add by a popup window, so that user can add some data like discription etc. On that popup window is a 'Save' button, which is doing a API call to the backend to save the event data.

Here is the code: HTML part

<full-calendar
        v-if="calendarOptions"
        id="fullcalendar"
        :options="calendarOptions"
        tabindex="0"
        @rendered="storeCalendar"
      ></full-calendar>

const storeCalendar = (api: CalendarApi | undefined): void => {
      if (api) {
        calendar.value = api;
      }
    };

Next part is open dit popup dialog for creating new event:

const openNewAgendaItemDialog = (
      agendaItem: AgendaItem,
      allDay: boolean | undefined = undefined
    ) => {
      $q.dialog({
        component: EventDetailsDialog,
        componentProps: {
          modelValue: agendaItem,
          isNew: true,
          zaak: zaak.value,
          isReadonly: isAgendaActueel.value,
          isAllDay: allDay,
          agendaItemTypes: determineAgendaItemsTypes(allDay),
        },
      }).onOk(async (returnValue: AgendaItemDialogReturnType) => {
        switch (returnValue.type) {
          case "new":
            createAgendaItem(zaakId, returnValue)     // http call to the backend
              .then(() => {
                createConfirmation(
                  "Succesvol opgeslagen",
                  `De agenda-item is succesvol opgeslagen.`
                );
              })
              .then(reload);
            break;
          case "delete":
            throw new Error(`Unexpected object: ${returnValue}`);
        }
      });
    };

const reload = (error: AxiosError | undefined | void = undefined): void => {

      if (!error || (!!error && error.response?.status !== HTTP_NOT_FOUND)) {
        console.log("reload: ");
        fetchEvents(zaakId, agendaId);        // this is a call to the backend
        fetchZaak(zaakId, true);
        fetchZaakWaarschuwingen(zaakId, true);

        inconsistentieCheck(true);
      }
    };

const inconsistentieCheck = (update: boolean): void => {
      
      calendar.value!.refetchEvents();
      let eventArray = calendar.value!.getEvents();      
      eventArray.forEach((event) => {console.log("event.title: " + event.title)})
};

In the reload is the method fetchEvents called, which is doing a call to backend. Here the same the just added or removed event is not in the events returned from the backend. I suppose the call fetchEvents is done\finished before the write 'createAgendaItem' is finished. The reload is called by create, update, delete.

The issue is:

Adding new event: than I see all the events in console log, except the one I just added. If I one of the events update, descriptin for example, than the just added event is shown in the console log.

Removing an event: The same if I remove a event, than it is still there in console log shown. The same if I update an existing event, save it, than it is removed from the getEvents() list in the console log.

My expections is that getEvents() get all the events that are in memory but the one just add is than missing.

Does somebody know what I'm doing wrong, so I do not have the actual events list?

EDIT: I have added the HTML part and the code calling the dialog window. (It's created in Vue, Kotlin, PostgreSQL)

Answer 1

ADyson, at the end this the issue. I've not all the time been working on it, but it is due the fetchEvents is doing a call to backend and is receiving the 'old' status of the events and is 'refreshing' my eventArray.

But I detected in the meantime that not een eventStore is used, so everything is updated via the backend.