Mettre à jour FullCalendar avec Firebase sur un nouvel événement
J’essaie de construire une application de planification avec calendrier complet et Firebase. Mais je ne peux pas obtenir le calendrier pour mettre à jour les modifications (événements ajoutés / supprimés / déplacés). Les modifications sont reflétées instantanément dans Firebase.
J’atsortingbue les données après le démarrage du calendrier (lorsqu’il est chargé depuis Firebase). J’ai essayé d’assigner un tableau de données en tant que propriété addEventSource et events . On dirait que eventSource fonctionne mieux que l’atsortingbution en tant que propriété events . Mais il ne met pas à jour lorsque les données changent.
La seule chose qui fonctionne est le rendu ou la suppression manuelle de l’événement dans le calendrier. Mais je veux mettre à jour en temps réel!
Voici un extrait de mon code:
- Tables de données et Web Firebase
- Supprimer un object de Firebase à l’aide de JavaScript
- Comment implémenter une image popup dans jQuery pour Firebase
- Itération dans des objects de base de feu nesteds – Javascript
- Créer un nouveau chemin unique vers Firebase Storage, associé à son stockage dans la firebase database?
// 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"); } };
Dans la documentation complète du calendrier , j’ai trouvé:
Les sources d’événements doivent être manipulées de manière dynamic via des méthodes telles que addEventSource et removeEventSource. Ainsi, le paramétrage dynamic des options suivantes n’est pas applicable:
- événements
- eventSources
Par conséquent, je pense que vous devez utiliser un EventSourceObject et faire quelque chose comme ceci:
// 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); };