0

我有一个页面显示未来 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();
        }
4

3 回答 3

2

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

于 2013-01-11T00:44:28.607 回答
0

在我看来，您在这里从错误的角度处理问题。与其让您的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
            }
    });
于 2013-01-11T10:10:10.010 回答
0

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

    Event.where(:start_at => DateTime.strptime(params[:start],'%s')..DateTime.strptime(params[:end],'%s'))
于 2014-02-19T09:13:26.193 回答