ajax - 如何使用 Ajax 加载日历上的所有事件？

Question

我想在单击 时使用 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 在我的情况下不起作用

Answer 1

来自 FullCalendar 在线文档

FullCalendar will call this function whenever it needs new event data. This is triggered when the user clicks prev/next or switches views.

This function will be given start and end parameters, which are Moments denoting the range the calendar needs events for.

timezone is a string/boolean describing the calendar's current timezone. It is the exact value of the timezone option.

It will also be given callback, a function that must be called when the custom event function has generated its events. It is the event function's responsibility to make sure callback is being called with an array of Event Objects.

Here is an example showing how to use an event function to fetch events from a hypothetical XML feed:

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

Source

我做了一些小改动:

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

备注: start和 end 必须是 ISO 8601 .另一个变化是使用 format而不是 unix (这让我更容易处理代码隐藏)