FullCalendar does not render a new calendar with no events

56 viewsajaxfullcalendarjquery
0

I am trying to display different calendars for the use of different machines with FullCalendar 6.1.10. I am moving from one machine to another with a button. The button triggers an ajax request and a json object is returned from the server with potential events to display; the calendar should show a new title reflecting the new device for which booking events are present in the database.

The name is correctly received in responseObject.machine2BookName and everything works fine except when I am moving from a device with no booking events to another again with no booking events (an empty calendarevents json object is received). While $('#currmachine').data('currmachine') contains the right updated title, the calendar is not re-rendered and thus I am left with the old title referring now to the previous machine.

This is the jquery code:

function changemachine(calendar, direction, itemname='') {
    // clear old bookings for the previous machine and fetch the next with its bookings
    //calendar.removeAllEvents();
    calendar.destroy();
    cmach = $('#currmachine').data('currmachine');

    var currmac  = {
        currmachine:  cmach,
        selecteditem: itemname,
    };
     
    $.ajax({
        url: direction+'_machine',
        method: 'GET', //better for more complex data
        type: 'GET',
        data : currmac,
        dataType: "json",
        success: function (response) {
            var responseObject = JSON.parse(response);
            var calendarevents = JSON.parse(responseObject.formatted_bookings_json);
   
            $('#change_machine h3:first').text('Booking: ' + responseObject.machine2BookName);
            $('#currmachine').data('currmachine', responseObject.machine2BookName);
            $('#timelimit').data('timelimit', responseObject.timelimit);
            calendar.setOption('events', calendarevents);

            // Force redraw (refetch and rerender)
            calendar.refetchEvents();
        },
        error: function (response) {
              alert('change machine button has a problem!!!');
        }
    }); //ajax
};

When I pass from an event rich calendar to another, everything works. However, when the calendar has no events to display and calendarevent is empty, the calendar is not refreshed and the new title corresponding to $('#currmachine').data('currmachine') is not shown. Making space for the events concerning the new machine with either calendar.removeAllEvents(); or calendar.Destroy(); produce the same result: the calendar is not rendered again. Redrawing seems to be driven by calendar.setOption('events', calendarevents); and calendar.refetchEvents(); does not change anything.

Any suggestion?