How add events in fullcalendar without wait for database adding

Question

I figured out how to add en event quickly in fullcalendar, The idea is add to calendar, display and after save to database, without wait for database, but then events recently added gets duplicate when going back a week and comeback.

The code for add the event to calendar is this:

// First add the event to calendar, displaying almost instantly.
      var idTemp = Math.floor(Math.random() * 100000) + 1;

                        var event = {
                            id: idTemp,
                            title: TextoEvento,
                            start: CalendarInfoSelect.start,
                            end: CalendarInfoSelect.end,
                            allDay: false,
                            tituloOriginal: TextoEvento,
                            backgroundColor: colorEvento,
                            textColor: colorEventoTexto
                        };
                       calendar.addEvent(event );

                     // Then, add to database:
                              $.ajax({
                                cache: false,
                                url: '@Url.Action("EventAddedTareaReciente", "CH")',
                                type: "POST",
                                dataType: 'json',
                                data: {
                                    id: Idbd,
                                    idAct: IdAct,
                                    idProy: IdProy,
                                    idProd: IdProd,
                                    newStart: CalendarInfoSelect.startStr,
                                    newEnd: CalendarInfoSelect.endStr,
                                    ini: CalendarInfoSelect.start.toISOString(),
                                    fin: CalendarInfoSelect.end.toISOString()
                                },
                                success: function (data) {
                                    if (data.Id > 0) {
                                        event = calendar.getEventById(idTemp);

                                        // Here set id with database's one
                                        event.setProp('id', data.Id);
                                    }
                                    else {
                                        event = calendar.getEventById(idTemp);
                                        event.remove();
                                    }
                                },
                                error: function (xhr) {
                                    event = calendar.getEventById(idTemp);
                                    event.remove();

                                }
                            });

There is no error here it's works fine. But when the user click to got one week back and comeback to the original week the event gets duplicate.

If the user add several event this ways this events gets duplicate in calendar.But they are not duplicate in database when refresh browser (F5) the display it's perfectly fine.

It's like the events add this way get sticky in memory.

Any help, ideas? I can't find a solution. Maybe there is another way to do that.

I use FullCalendar Core Package v4.3.1

Thanks

Answer 1

As per https://fullcalendar.io/docs/v4/Calendar-addEvent, if you specify an event source for the event to belong to (logically, it should be the same source you fetch your events from when receiving them from the database), then when the source is re-fetched (e.g. such as when the calendar date changes) it will clear the locally-added event from the calendar.

If you didn't define a specific event source when setting up the calendar, now would be a good time to modify your options slightly to support this - see https://fullcalendar.io/docs/v4/eventSources and https://fullcalendar.io/docs/v4/event-source-object

Example:

Event source is defined in the calendar configuration:

eventSources: [{
  id: 1,
  url: '/events'
}]

Event manually added to the calendar is associated with the event source:

calendar.addEvent(event, 1);