在新事件中使用 Firebase 更新 FullCalendar答案

【问题标题】：Update FullCalendar with Firebase on new event在新事件中使用 Firebase 更新 FullCalendar
【发布时间】：2016-12-01 18:52:50
【问题描述】：

我正在尝试构建一个包含完整日历和 Firebase 的日程安排应用。但我无法让日历更新更改（添加/删除/移动事件）。更改会立即反映在 Firebase 中。

我在日历init'ing 之后分配数据（从 Firebase 加载时）。我尝试将数据数组分配为 addEventSource 和 events 属性。似乎eventSource 比分配为events 属性更好。但是当数据发生变化时它不会更新。

唯一可行的方法是手动渲染或删除日历中的事件。但我要实时更新！

这是我的一些代码：

// index.js
exports.getEvents = function() {
    return new Promise(function(resolve, reject) {
        firebase.getEvents()
            .then(calendar.addEventSource)
            .then(function() {
                resolve(true);
            })
            .catch(function(error) {
                console.warn(error);
                reject(error);
            });
    });
}

// firebase.js
exports.getEvents = function() {
    return new Promise(function (resolve, reject) {
        var ref = firebase.database().ref().child("bookings");
        ref.on('value', function (snap) {
            var arr = obj2arr(snap.val());
            calendar.render(arr);
            resolve(arr);
        }, function (err) {
            console.warn("firebase getBookings", err);
            reject(err);
        });
    });
}

// calendar.js
exports.render = function(events) {

    if ($calendar) {
        $calendar.fullCalendar( 'refetchEvents' );

        //$calendar.fullCalendar( 'removeEvents' );
        //$calendar.fullCalendar( {events: events} );

        //$calendar.fullCalendar( 'refetchEventSources', arr );
        //$calendar.fullCalendar( 'rerenderEvents' );

        console.log("calender rendered");
    }
};

【问题讨论】：

您注释掉的那些行是否您尝试过但不起作用？在我看来，.fullCalendar({events: events}); .fullCalendar('refetchEvents'); 应该这样做。
是的，注释行是我尝试过的。不幸的是，他们什么都不做。包括'refetchEvents'......这似乎是常见的建议。所以我不明白为什么它在这里不起作用。该功能在最新版本中是否损坏？还是我做错了什么？它是否仅适用于作为数据源的“事件”属性或作为数据源的“事件源”？

标签： javascript jquery firebase firebase-realtime-database fullcalendar

【解决方案1】：

在fullCalendar documentation，我发现：

应通过以下方法动态操作事件源 addEventSource 和 removeEventSource。因此，动态设置以下选项不适用：

事件

事件源

因此，我认为您需要使用 EventSourceObject 并执行以下操作：

// firebase.js
    // (Inside 'value' callback):
    var newEventSource = {events: snap.val()};
    calendar.render(newEventSource);

// calendar.js
exports.render = function(newSource) {
    $calendar.fullCalendar('removeEventSources');
    $calendar.fullCalendar('addEventSource', newSource);        

};

【讨论】：