jQueryUI FullCalendar:从服务器获取事件后的回调

jQueryUI FullCalendar: Callback after events have been fetched from server

本文关键字：事件 回调 获取 服务器 FullCalendar jQueryUI      更新时间：2023-09-26

我使用Adam Shaw的jQueryUI FullCalendar(http://arshaw.com/fullcalendar/docs/event_data/events_function/)。

当我按下下一个按钮时，日历会从我的服务器加载新事件，我希望在我的页面上也将这些事件显示为表，而不仅仅是在日历中。有没有一个回调函数，我可以在FullCalendar获取事件后注入它来处理事件？或者有其他方法可以获取当前显示的事件吗？

对于其他寻求此解决方案的人来说，在V2中这很容易。您可以使用简单事件对象传递成功回调。

        $('#calendar').fullCalendar({
            events: {
                url: 'http://yourdatafeed',
                type: 'POST',
                error: function() {
                    // Alert on error
                },
                success: function (data) {
                    // data will have your json array of event objects
                },
            }
        });

您发布的链接显示了问题的答案：

$('#calendar').fullCalendar({
events: function(start, end, callback) {
    $.ajax({
...

每次获取新事件时都会使用"events"回调函数。在本例中，调用jQuery的$.ajax函数来检索事件数据（查看ajax函数）。$.ajax的"成功"回调然后将服务器中的事件数据解析为FullCalendar期望的格式：

$(doc).find('event').each(function() {
     events.push({
         title: $(this).attr('title'),
         start: $(this).attr('start') // will be parsed
     });
 });
callback(events);

在示例中，"doc"是一个xml文档，它包含具有title和start属性的事件元素。您应该将其更改为从服务器检索到的任何内容。有了检索到的数据，您可以在将其传递给FullCalendar之前或之后做任何您想做的事情（示例中使用callback(events);）

我通过实际重写代码来获取数据来解决问题：

var myCustomFunction = function(events) {
    // do something
}
var myCustomFetchFunction = function(start, end, callback) {
    $.ajax({
        url: 'feed.php',
        dataType: 'json',
        data: {
            // our hypothetical feed requires UNIX timestamps
            start: Math.round(start.getTime() / 1000),
            end: Math.round(end.getTime() / 1000)
            // additional parameters can be added here
        },
        success: function(events) {
            callback(events);
            // this is where I do some custom stuff with the events
            myCustomFunction(events);
        }
    });
};
$('#calendar').fullCalendar({
     events: myCustomFetchFunction()
});

使用eventRender在DOM中插入事件。参见文件

eventRender: function(event, element) {
    // do some DOM manipulation here
}

或者收集它们，稍后将其插入DOM：

var collection = [];
$('#calendar').fullCalendar({
    eventRender: function(event, element) {
        collection.push(event);
    }
});
相关文章：