使用Firebase更新FullCalendar新事件

我正在尝试使用完整日历和Firebase构建计划应用程序。但是我无法让日历更新更改（添加/删除/移动的事件）。这些更改会立即反映在Firebase中。使用Firebase更新FullCalendar新事件

我在日历init'之后分配数据（从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"); 
    } 
};

来源

2016-12-01 olefrank

你已经评论过你试过的东西不行吗？在我看来，'.fullCalendar（{events：events}）; .fullCalendar（'refetchEvents'）;'应该这样做。 – Lesley

是评论线是我尝试过的东西。不幸的是，他们什么都不做。包括'refetchEvents'...这似乎是常见的建议。所以我不明白为什么它不在这里工作。该功能是否在最新版本中被打破？或者我做错了什么？它是否只与作为数据源的'events'属性或作为数据源的'eventSource'兼容？ – olefrank

在fullCalendar documentation，我发现：

事件源应该通过像 addEventSource和removeEventSource方法来操纵动态。正是如此，的以下选项动态设置不适用：

事件

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

};

来源

2016-12-06 16:15:12 Lesley

使用Firebase更新FullCalendar新事件

回答

相关问题