0

次の 30 日間のイベントを表示するページがあります。ユーザーが月ビューで [次へ] をクリックしたとき、またはユーザーが 30 日を超えたときに週/日ビューで [次へ] ボタンをクリックし続けたときに、カレンダーを更新するにはどうすればよいですか?

週ビューで 5 回目の [次へ] ボタンをクリックすると、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

cal を preset で初期化しているために発生しますevents:arrMtgs。代わりに、例の doc: events funまたはjson feedのように、FC に必要なイベントを要求させます。また、 jQuery を使用すると、より単純な ajax リクエストを実行できます$.ajax。

于 2013-01-11T00:44:28.607 に答える
0

ここで間違った角度から問題に取り組んでいるようです。GetFutureMeetingsForTimeSpan関数が呼び出されるたびに FC インスタンスを再初期化する代わりに、 FC を1 回だけGetFutureMeetingsForTimeSpan初期化し、FC に関数 (またはそのバリアント) を呼び出させる必要があります。

したがって、FC インスタンスが初めて表示されるときに作成し、必要に応じてイベント関数を使用してイベントをロードすることをお勧めします。

    $('#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

カレンダーのパフォーマンスが非常に悪いという u と同じ問題がありました。次のことを理解するまで: fullcalendar がイベントを返す ajax URL。デフォルトでは、開始パラメータと終了パラメータを ajax リクエストに関連付けます。これらの開始日と終了日は、各カレンダー ページに表示されるイベントの最初の日付と最後の日付を表します (「次へ」と「前へ」の矢印で変更できます)。したがって、すべてのイベントを返すイベント コードでは、この start と end によってイベントを制限できます。コントローラーのコードは次のようになります。

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