使用Firebase更新FullCalendar新事件 [英] Update FullCalendar with Firebase on new event

问题描述

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

在日历 init 'ing（从Firebase加载时） 。我尝试将数据数组分配为 addEventSource 和 events 属性。看起来像 eventSource 比指定为 events 属性更好。但是当数据改变时它不会更新。

只有在日历中手动渲染或删除事件。但我希望实时更新！

以下是我的一些代码：

  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）; 
}）; 
}）; 
 
 $ b $ 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）; 
拒绝（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文档，我发现：

lockquote

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

• 事件


• eventSources

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

  // firebase.js 
 //（内部'value'回调）：
 var newEventSource = {events：snap.val（）}; 
 calendar.render（newEventSource）; 
 
 // calendar.js 
 exports.render = function（newSource）{
 $ calendar.fullCalendar（'removeEventSources'）; 
 $ calendar.fullCalendar（'addEventSource'，newSource）; 
 
}; 
  

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

解决方案

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

};

这篇关于使用Firebase更新FullCalendar新事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！