Fullcalendar abort all xhr request when i change of week (timeGridWeek)

user_17320474 0
Viewed 66

I am currently creating a calendar that linked to a php file returning a json with eventSources. Everything works as I want, the problem is when I want to see in 5 weeks what is in the calendar, I click 5x for the next week but fullcalendar loads the 5 weeks, even if I only need the last one. And calendar waits for the last request to load before moving on to the next one.

Is there a way to tell fullcalendar to stop the requests when I click on the "next/previous week" button? (the api is very slow and takes ~1s-2s to load and I can't do anything to change that)

Thanks in advance

My calendar

Xhr requests

fullcalendar javascript
1 Answers

The short answer is... no, you cannot.

But there are some alternatives, like 1) adding extra buttons to move 4-5 weeks ahead or back or 2) adding a button to select a date/week (for example with any datepicker widget)

Here you have the code (excerpt) for both options, assuming that you can use jquery's datepicker (or any other one) and you use v5 of FullCallendar:

var calendar = new FullCalendar.Calendar(calendarEl, {
        [...]
        headerToolbar: {
            left: 'prev4w,prev,today,next,next4w opendatepicker',
            center: 'title',
            right: ''
        },
        customButtons: {
            prev4w: {
                //text: '-4w',
                hint: '4 weeks back',
                click: function(e) {
                    e.preventDefault();
                    calendar.gotoDate(moment(calendar.view.currentStart).subtract("4", "weeks").format("YYYY-MM-DD"));
                },
            },
            next4w: {
                //text: '+4w',
                hint: '4 weeks ahead',
                click: function(e) {
                    e.preventDefault();
                    calendar.gotoDate(moment(calendar.view.currentStart).add("4", "weeks").format("YYYY-MM-DD"));
                },
            },
            opendatepicker: {
                hint: 'Go to date...',
                click: function(e) {
                    e.preventDefault();
                    if($("#datepicker").datepicker("widget").is(":visible")){
                        $("#datepicker").datepicker("hide");
                    }else{ 
                        $("#datepicker").datepicker("show"); 
                    }                       
                },
            }
        },
        datesSet: function(dateInfo) {
            var inicio = moment(dateInfo.startStr);

            [...]
                
            $("#datepicker").val(inicio.format('DD/MM/YYYY'));
        }
});





$().ready(function() {
    var inicio = moment(calendar.view.currentStart).format("DD/MM/YYYY"); 

    $(".fc-toolbar-chunk").first().append(
        '<input type="hidden" id="datepicker" size="8"></input>'
    );

    $("#datepicker").datepicker({
        [...]
        dateFormat: "dd/mm/yy",
        onSelect: function(formated, dates) {
            var fecha = moment(formated,"DD/MM/YYYY",true).format('YYYY-MM-DD');

            calendar.gotoDate(fecha);
        },
        [...]
    });

    
    $("#datepicker").datepicker( "setDate" , inicio );
})
user_8442120
Related