在新活动中使用Firebase更新Fullcalendar

Question

我正在尝试构建具有完整日历和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");
    }
};

Answer 1

在FullCalendar文档中，我发现：

应通过诸如 Addeventsource和Demoseventsource。因此，动态设置 以下选项不适用：

• 事件
• Eventsources

因此，我认为您需要使用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);        
};