在新活动中使用Firebase更新FullCalendar

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

我在日历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"); } }; 

Answer 1

在fullCalendar文档中 ，我发现：

应该通过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); };