如何使用 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 Online 文档

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

此函数将获得开始和结束参数，它们是 表示日历需要事件范围的时刻。

时区是描述日历当前日历的字符串/布尔值 时区。它是时区选项的确切值。

它还将被赋予回调，这是一个必须在以下情况下调用的函数 自定义事件函数已生成其事件。这是事件 函数负责确保调用回调 事件对象的数组。

下面是一个示例，演示如何使用事件函数来获取 来自假设的 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);
            }
        });
    }
});

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

Answer 2

有一个内置的选项可用

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

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

Answer 3

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

Answer 4

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,

您只需要提供网址。当然，您必须处理来自服务器的正确 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

}

Answer 5

var events= '';
    $.ajax({
      url: '/eventoscalendar',
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        events= JSON.stringify(data);
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            editable: true,
            displayEventTime: true,
            selectable: true,
            droppable: false,
            events: JSON.parse(events)
        });
      }
    });
y en /eventoscalendar 
public function eventoscalendar()
  {
        $events[]= [
                "title" =>'Meeting',
                "start"=> date('Y-m-d'),
                "allDay"=> false,
                "url"=> 'http://google.com/'                    
        ]; 
        return JsonResponse::create($events, 200, array('Content-Type'=>'application/json; charset=utf-8' ));
    }