fullcalendar version 4: refetch events doesn't remove newly added event

Question

I'm using fullcalendar version 4, and I've added a custom button to 'refresh' the calendar with current information/events.

Here's my button:

 customButtons: {
        myReloadButton: {
            text: 'refresh',
             click: function() {
                    calendar.refetchEvents();
                    calendar_mini.refetchEvents();
               }
            }

I have two calendars that I want to refresh as you can see. It works fine, but I notice an issue. When I create a new event, it's added to the calendar as it should. However, if the user clicks the 'refresh' button right afterwards then the just-added event shows up twice once the events are re-loaded. It seems the newly added event was never removed during the refresh.

I have a modal form that opens to gather information for the event. Once the event is saved, here's how I am saving it (via an ajax call). In the success of the ajax, I am adding the event to my calendar with .addEvent()

 var location_id = $('#formEventModal #location_id').val();
 var saw_by_id= $('#formEventModal #saw_by_id').val();

$.ajax({
            url: "ajax_insert.php?table=appointments",
            dataType: 'json',
            type: "POST",
            data: $('#appointmentForm').find(':input').not('.dont_serialize').serialize(),
            success: function(response) {
                if (response.success) {

                    //get the inserted id of the appt just added so it can be updated on the stop if needed.
                    var lastInsertID = response.lastInsertID;

                    var event_object = {
                        id: lastInsertID,
                        location_id: location_id,
                        resourceId: saw_by_id,
                    };

                        calendar.addEvent(event_object);
                        calendar_mini.addEvent(event_object);

Why is it that the refresh button doesn't remove newly added events?

Answer 1

The problem is that refetching events just reloads events from a defined source. It doesn't have any effect on standalone events which are not attached to a source.

There are two ways to address this

One solution is to replace calendar.addEvent(event_object); in the AJAX "success" function with simply calendar.refetchEvents(); - then it immediately reloads from the server, which will include the newly added event, instead of adding a separate standalone event to the calendar directly.

Another option is to attach the event to the source when adding it to the calendar. The Add Event documentation says

source represents the Event Source you want to associate this event with. It can be a string Event Source ID or an Event Source Object. When the source is refetched, it will clear the dynamically added event from the internal cache before fetching. This parameter is optional.

So if you gave your event source an ID when you declared it, you could place that here as an extra option to associate the event with the source. Something like this:

calendar.addEvent(event_object, 1);