Update FullCalendar with Firebase on new event

问题

I'm trying to build a schedule app with full calendar and Firebase. But I can not get the the calendar to update on changes (events added/deleted/moved). The changes are reflected instantly in Firebase.

I assign data AFTER calendar init'ing (when loaded from Firebase). I tried assigning data array as addEventSource and events property. Seems like eventSource works better than assigning as events property. But it is not updating when data changes.

Only thing that works is manually render or removing the event in the calendar. But I want real time updating!

Here is some of my code:

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

回答1:

In the fullCalendar documentation, I found:

Event Sources should be dynamically manipulated through methods like addEventSource and removeEventSource. Thusly, dynamic setting of the following options is not applicable:

• events
• eventSources

Therefore I think you need to use an EventSourceObject and do something like this:

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

};

来源：https://stackoverflow.com/questions/40918293/update-fullcalendar-with-firebase-on-new-event