jQuery FullCalendar：如何在单击下一个和上一个按钮时加载事件

Question

我有一个显示未来 30 天事件的页面。 当用户单击月视图中的下一个或当用户继续单击周/日视图中的下一个按钮超过 30 天时，如何刷新日历？

如果我在周视图中第五次点击下一步按钮，我在日历上看不到任何事件，因为我只有 4 周的事件。

我想通过 ajax 从服务器中提取数据并刷新日历。

这是我当前的代码：

在页面加载时我这样调用：

GetFutureMeetingsForTimeSpan(1, 30);

function GetFutureMeetingsForTimeSpan(startDaysFromNow, endDaysFromNow) {            
            var obMtgs;
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == '200') {
                        try {                            
                            var arrMtgs = new Array();
                            var meetingObjectArray = JSON.parse(xmlHttp.responseText);
                            var startTime = '', endTime = '';
                            var yr1 = 0, mo1 = 0, day1 = 0, hr1 = 0, min1 = 0;
                            var yr2 = 0, mo2 = 0, day2 = 0, hr2 = 0, min2 = 0;
                            for (var i = 0; i < meetingObjectArray.length; i++) {                                
                                obMtgs = new Object();
                                obMtgs.id = meetingObjectArray[i].ID;        
                                obMtgs.title = meetingObjectArray[i].ExchangeResource.Subject;


                                obMtgs.start = new Date(yr1, mo1, day1, hr1, min1, 0);                                
                                obMtgs.end = new Date(yr2, mo2, day2, hr2, min2, 0);

                                arrMtgs.push(obMtgs);
                            }

                            //populate the calendar with events array                            
                            $('#calendar').fullCalendar({
                                defaultView: 'agendaWeek',
                                theme: true,
                                header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay'
                                },
                                disableDragging: true,
                                disableResizing: true,
                                editable: true,
                                events: arrMtgs,                                
                                eventRender: function (event,element){ 
                                    //code removed
                                },
                                eventClick: function (calEvent, jsEvent, view) {
                                    //code removed
                                },
                                viewDisplay: function (view) {
                                    //code removed
                                }
                            });
                        }
                        catch (e) {
                            alert('decode failed! msg=' + e.message);
                        }
                    }
                    else {
                        alert('Failed to get meetings! status=' + xmlHttp.status);
                    }
                }
            }

            //load events from server via webservice using ajax
            var url = server_part + "/Meeting/Schedule/Future/TimeSpan/";
            url += "?startDaysFromNow=" + startDaysFromNow;
            url += "&endDaysFromNow=" + endDaysFromNow;
            url += "&APIKey=asjdasjdhhksajhd";

            xmlHttp.open("GET", url, false);
            xmlHttp.setRequestHeader("Accept", "application/json");
            xmlHttp.send();
        }        

Answer 1

发生是因为您正在使用预设 events:arrMtgs 初始化校准。 相反，让 FC 请求它需要的事件，例如在示例文档中：events fun 或 json feed。 此外，您可以使用 jQuery $.ajax 执行更简单的 ajax 请求。

Answer 2

在我看来，您在这里从错误的角度处理问题。与其让GetFutureMeetingsForTimeSpan 函数在每次调用它时重新初始化您的 FC 实例，不如将您的 FC 只初始化一次，然后让 FC 调用 GetFutureMeetingsForTimeSpan 函数（或它的一些变体）。

所以我建议你在 FC 实例第一次可见时创建它，并在必要时使用 events 函数加载事件：

    $('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            theme: true,
            header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
            },
            disableDragging: true,
            disableResizing: true,
            editable: true,
            events: function(start, end, callback) {
                    // populate arrMtgs as you're used to
                    // using the start and end parameters,
                    // or see MaxD's answer for alternatives
                    callback(arrMtgs);
            },
            eventRender: function (event,element){ 
                    //code removed
            },
            eventClick: function (calEvent, jsEvent, view) {
                    //code removed
            },
            viewDisplay: function (view) {
                    //code removed
            }
    });

Answer 3

我遇到了和你一样的问题，日历的性能很差。直到我意识到以下几点： fullcalendar 从其返回事件的 ajax URL，默认情况下将 start 和 end 参数与 ajax 请求相关联。这些开始和结束代表每个日历页面上显示的事件的第一个日期和最后一个日期（可以通过“下一个”和“上一个”的箭头更改）。因此，在您返回所有事件的事件代码中，您可以通过此开始和结束来限制它们。 控制器上的代码可以是：

    Event.where(:start_at => DateTime.strptime(params[:start],'%s')..DateTime.strptime(params[:end],'%s'))