jquery - 为什么 jQuery FullCalendar 插件对每个操作执行 ajax 请求？

Question

我有以下代码来利用 jquery FullCalendar 插件:

$(function () {
    var dueHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetDueHotfixEvents', color: 'red' };
    var releasedHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedHotfixEvents', color: 'green' };
    var releasedVersionEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedVersionEvents', color: 'green' };
    var pendingVersionEvents = { url: baseUrl + '/Misc/Calendar/GetPendingReleaseEvents', color: 'blue' };
    var dueTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksDueEvents', color: 'red' };
    var completedTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksCompletedEvents', color: 'blue' };

    $('#calendar').fullCalendar({
        //theme: true,
        eventSources:
        [
            dueHotfixEvents,
            releasedHotfixEvents,
            releasedVersionEvents,
            pendingVersionEvents,
            dueTaskEvents,
            completedTaskEvents
        ]
    });
});

它们一次检索系统中的所有日期。但是，每当我更改所在月份时，它似乎都会从事件源重新获取所有数据。我不想要这个，因为它已经拥有所需的所有数据。

文档指出，将 lazyFetching 选项设置为 true 应该可以解决此问题，但据说默认情况下将其设置为 true，但无论执行 lazyFetching: true, 或 lazyFetching: false, 似乎并没有改变这一点。

如何阻止 FullCalendar 发出如此多的 ajax 请求？

Answer 1

嗯，我之前也在考虑类似的事情，并提出了两个解决方案。您可以更改 fullcalendar 插件本身中的一些方法(这并不难，我实现了一些新东西，例如在天/时段/事件等上捕获 dblclick 事件，但如果您计划使用进一步的 fc，我不建议此解决方案有任何好处更新)或使用某种“解决方法”。此解决方法基于在初始化 fullcalendar 之前获取事件数组，因此您可以使用定义为事件数组的 Evensources 来初始化 fc，这将导致 fc 本身不会从服务器请求任何数据(即使它确实重新获取所有事件源，它也会仍然只获取那些静态数组)。您还可以将此方法与捕获“viewDisplay”回调连接起来，检查内部是否已经加载了这些数组，如果没有，则从服务器获取它们并通过 addEventSource 方法添加它们(您可能需要 fc 之外的一些简单的全局标志来存储状态，事件是否已加载)。它看起来像这样:

$(function () {
    var dueHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetDueHotfixEvents', color: 'red' };
    var releasedHotfixEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedHotfixEvents', color: 'green' };
    var releasedVersionEvents = { url: baseUrl + '/Misc/Calendar/GetReleasedVersionEvents', color: 'green' };
    var pendingVersionEvents = { url: baseUrl + '/Misc/Calendar/GetPendingReleaseEvents', color: 'blue' };
    var dueTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksDueEvents', color: 'red' };
    var completedTaskEvents = { url: baseUrl + '/Misc/Calendar/GetReleaseTasksCompletedEvents', color: 'blue' };
    var eventsLoaded = false;

    $('#calendar').fullCalendar({
        //theme: true,
        eventSources:[],
        'viewDisplay': function(v){
            if(!eventsLoaded){
                var $fcEl = $(this);
                $.ajax({
                    url:dueHotfixEvents.url,
                    type:"get",
                    dataType:"json",
                    success:function(response){
                        if(response.length > 0) $fcEl.fullCalendar('addEventSource', {events:response,color:dueHotfixEvents.color});
                    }
                });
                .
                .  //do same for every source defined
                .
                eventsLoaded=true;
            }
        }
    });
});

希望这对您有帮助(我想有更好的解决方案，但这个似乎足够简单且容易实现相当快+它真的很容易包含很多选项来控制何时适合重新加载事件+它实际上解决了当有定义的在线源时，我在动态创建事件时不断收到烦人的双重事件。