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

在我看来，你从错误的角度来看待这个问题。每次调用FC实例时，不应让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 params与ajax请求相关联。这些开始和结束表示每个日历页面上显示的事件的第一个日期和最后日期（可以通过“下一个”和“上一个”的箭头进行更改）。所以在你的事件代码中返回所有事件，你可以通过这个开始和结束来限制它们。控制器上的代码可以是：

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

jQuery FullCalendar：如何在Next和Previous按钮上单击加载事件

3 个答案: