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

How can I load all events on calendar using Ajax?

提问by Frank

I want to load all events on FullCalendar using AJAX when I clicked next-previous-buttonin agenda-views.

我想用AJAX当我点击加载上FullCalendar所有事件下以前的按钮在agenda-views。

I guess, when will click on next-previous-buttonthen I'll send current date('y-m-d')to url: 'fetch-events.php'then it will return event{ id: ,title: , start: , end: , allDay: }format data for rendering on calendar

我想，什么时候点击下一个上一个按钮然后我将发送当前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 not working in my case

JSON 在我的情况下不起作用

回答by Michel Ayres

From the FullCalendar Online Documentation

来自 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 startand endparameters, which are Momentsdenoting the range the calendar needs events for.

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

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 callbackis 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:

FullCalendar 将在需要新事件数据时调用此函数。当用户单击上一个/下一个或切换视图时触发。

这个函数将被赋予开始和结束参数，它们是 表示日历需要事件范围的时刻。

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);
            }
        });
    }
});

Source

来源

---

---

I made some little changes:

我做了一些小改动：

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

Notes:startand endMUSTbe ISO 8601. Another change was the use of formatinstead of unix(this made easier for me to deal with the code-behind)

注意：start并且end必须是ISO 8601。另一个变化是使用了format而不是unix（这让我更容易处理代码隐藏）

回答by Jigs17

This is perfect way to load data properly.

// if you want to empty events already in calendar.
$('#calendar').fullCalendar('destroy');

$.ajax({
    url: 'ABC.com/Calendar/GetAllCalendar/',
    type: 'POST',
    async: false,
    data: { Id: 1 },
    success: function (data) {
        obj = JSON.stringify(data);
    },
    error: function (xhr, err) {
        alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
        alert("responseText: " + xhr.responseText);
    }
});

/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim($(this).text()) // use the element's text as the event title
    };
    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);
    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });
});

/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
    //isRTL: true,
    buttonHtml: {
        prev: '<i class="ace-icon fa fa-chevron-left"></i>',
        next: '<i class="ace-icon fa fa-chevron-right"></i>'
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //obj that we get json result from ajax
    events: JSON.parse(obj)
    ,
    editable: true,
    selectable: true    
});

回答by Sarath Ak

There is a built in option avaliable

有一个内置选项可用

var calendar = new FullCalendar.Calendar(calendarEl, {
    events: '/myfeed.php'
})

more details https://fullcalendar.io/docs/events-json-feed

更多详情https://fullcalendar.io/docs/events-json-feed