14

の next-previous-button をクリックしたときに、AJAX を使用して FullCalendar にすべてのイベントをロードしたいと考えていますagenda-views。

私は、いつ次の前のボタンをクリックし、次に現在date('y-m-d')を送信し、カレンダーにレンダリングするためのフォーマットデータをurl: 'fetch-events.php'返すと思いますevent{ id: ,title: , start: , end: , allDay: }

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    selectable: false,
    selectHelper: false,
    editable: false,

    events: // on-click next-previous button load events using Ajax
    // post date using Ajax, then query to fetch all events and return data             
});

私の場合、JSONが機能しません

4

4 に答える 4

25

FullCalendar オンライン ドキュメントから

FullCalendar は、新しいイベント データが必要になるたびにこの関数を呼び出します。これは、ユーザーが前/次をクリックするか、ビューを切り替えるとトリガーされます。

この関数にはstartおよびendパラメータ が与えられます。これらは、カレンダーがイベントを必要とする範囲を示すMomentsです。

timezoneは、カレンダーの現在のタイムゾーンを表す文字列/ブール値です。timezoneオプションの正確な値です。

また、カスタム イベント関数がそのイベントを生成したときに呼び出す必要がある関数callbackも指定されます。コールバックがEvent Objectsの配列で呼び出されていることを確認するのは、イベント関数の役割です。

イベント関数を使用して、架空の XML フィードからイベントを取得する方法を示す例を次に示します。

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

ソース

私はいくつかの小さな変更を加えました：

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        jQuery.ajax({
            url: 'schedule.php/load',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(doc) {
                var events = [];
                if(!!doc.result){
                    $.map( doc.result, function( r ) {
                        events.push({
                            id: r.id,
                            title: r.title,
                            start: r.date_start,
                            end: r.date_end
                        });
                    });
                }
                callback(events);
            }
        });
    }
});

注: ISO 8601startであるend 必要があります。もう 1 つの変更は、代わりにを使用することでした(これにより、コード ビハインドを処理しやすくなりました)。formatunix

于 2014-08-20T11:56:12.023 に答える
1

fullCalendar はすでに ajax を使用しているため、入力する必要はありません。fullCalendar の実装を開始したとき、ここで最も投票された回答のソリューションを使用しました。

https://stackoverflow.com/a/25404081/3927450

しかし、fullCalendar がビューの変更時に ajax 呼び出しを担当していることを証明できました。何もしなくてもかまいません。このプラグインは非常に便利ですが、ドキュメントはあまり明確ではありませんでした。

したがって、このコード：

events: function(start, end, timezone, callback) {
    jQuery.ajax({
        url: 'schedule.php/load',
        type: 'POST',
        dataType: 'json',

まさにこれです：

events: schedule.php/load,

URLを提供するだけです。もちろん、サーバーからの適切な JSON 応答を処理する必要があります。または、より多くのパラメーターが必要な場合は、次のようにすることができます。

events: {
url: '/myfeed.php',
method: 'POST',
extraParams: {
  custom_param1: 'something',
  custom_param2: 'somethingelse'
},
failure: function() {
  alert('there was an error while fetching events!');
},
color: 'yellow',   // a non-ajax option
textColor: 'black' // a non-ajax option

}

于 2020-08-03T23:17:26.680 に答える