当我更改一周（TimeGridWeek）时

Question

我目前正在创建一个日历，该日历链接到PHP文件，该文件返回使用Eventsources的JSON。一切都按照我的意愿运行，问题是当我想在5周内看到日历中的内容时，我点击了下周的5倍，但是FullCalendar在5周内加载了5周，即使我只需要最后一个。日历会等待最后一个请求加载，然后再进入下一个请求。

当我单击“下一个/上周”按钮时，有没有办法告诉FullCalendar停止请求？ （API非常慢，需要〜1S-2S加载，我无能为力），

谢谢

。 nofollow noreferrer“>

Answer 1

简短的答案是...不，你不能。

但是有一些替代方案，例如1）添加额外的按钮以提前或向后移动4-5周或2）添加一个按钮以选择日期/周（例如，使用任何datepicker wittget）

在此处拥有您的代码（摘录）这两个选项都假设您可以使用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 );
})