问题描述
我正在尝试使用完整的日历和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);
}
};
在,我发现:
lockquote
事件源应该通过像
addEventSource和removeEventSource这样的方法进行动态操作。因此,
以下选项的动态设置不适用:
- 事件
- eventSources
因此,我认为您需要使用并执行如下操作:
// 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:
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新事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!