新しいイベントでFirebaseでFullCalendarを更新

Question

私は完全なカレンダーとFirebaseでスケジュールアプリを構築しようとしています。しかし、私はカレンダーを変更（イベントの追加/削除/移動）時に更新することはできません。変更はFirebaseに即座に反映されます。

私はカレンダーinit（Firebaseからロードされたとき）の後にデータを割り当てます。私はaddEventSourceとeventsプロパティとしてデータ配列を割り当てようとしました。 eventSourceのように見えるのは、eventsというプロパティを割り当てるよりもうまく機能します。しかし、データが変更されたときには更新されません。

カレンダーのイベントを手動でレンダリングまたは削除するのは、動作するものだけです。しかし、私はリアルタイムで更新したい！ここで

私のコードの一部です：fullCalendar documentationで

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

、私が見つかりました：

イベントソースを動的に のaddEventSourceとremoveEventSourceのようなメソッドを介して操作する必要があります。

：

。したがって、私はあなたがEventSourceObjectを使用して、このような何かをする必要があると思う

eventSources

• イベント：Thusly、 次のオプションの動的な設定が適用されません

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