当我更改周时（timeGridWeek），Fullcalendar 中止所有 xhr 请求

Question

我目前正在创建一个日历，该日历链接到一个返回带有eventSources的 json 的 php 文件。 一切都按我的意愿进行，问题是当我想在 5 周内查看日历中的内容时，我单击 5x 下周但 fullcalendar 加载 5 周，即使我只需要最后一个。 日历会等待最后一个请求加载，然后再继续下一个请求。

当我单击“下一周/上一周”按钮时，有没有办法告诉 fullcalendar 停止请求？ （api非常慢，加载需要大约1s-2s，我无法做任何改变）

提前致谢

Answer 1

简短的回答是……不，你不能。

但也有一些替代方案，例如 1) 添加额外的按钮来提前或后退 4-5 周或 2) 添加一个按钮来选择日期/周（例如使用任何 datepicker 小部件）

在这里，您有两个选项的代码（摘录），假设您可以使用 jquery 的 datepicker（或任何其他）并且您使用 FullCallendar 的 v5：

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 );
})