Réédition des événements dans fullCalendar après la mise à jour de la firebase database Ajax

J’essaie d’avoir FullCalendar refléter les modifications apscopes à une firebase database via AJAX. Le problème est qu’il ne mettra pas à jour le calendrier à l’écran après un appel AJAX réussi.

$.ajax({ type: "POST", url: "eventEditXHR.php", data: { //the data }, success: function(text) { $("#calendar").fullCalendar("refetchEvents"); }.... 

Je suis en utilisant la mauvaise méthode? Quel serait le meilleur moyen d’y parvenir sans avoir à recharger toute la page? Merci pour toute consortingbution!

Il y a plusieurs façons. Certains moins élégants.

1. Si vous utilisez FullCalendar pour capturer des événements json:

 $('#calendar').fullCalendar({ events: "json-events.php", }); 

Il suffit de faire:

 $('#calendar').fullCalendar( 'refetchEvents' ); 

Si vous voulez qu’une méthode extérieure récupère des événements, vous pouvez le faire. Pas élégant mais fonctionnera

 $('#calendar').fullCalendar( 'removeEventSource', source ) $('#calendar').fullCalendar( 'addEventSource', source ) 

Vous pouvez rendre les événements en 3 étapes.

1) supprimer tous les événements

 .fullCalendar( 'removeEvents'); 

2) append l’événement sourse

 .fullCalendar( 'addEventSource', events); 

3) rendre les événements

 .fullCalendar( 'rerenderEvents' ); 

Comme…

 $.ajax({ type: "POST", url: "eventEditXHR.php", data: { //the data }, success: function(events) { $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', events); $('#calendar').fullCalendar('rerenderEvents' ); }. }); 

Voici ce qui fonctionne dans ASP.NET CORE, MVC 6:

  success: function(events) { $('#calendar').fullCalendar('rerenderEvents'); $('#calendar').fullCalendar('refetchEvents'); } 

alors que cela fonctionnait dans ASP.NET MVC 5:

  success: function(events) { $('#calendar').fullCalendar('refetchEvents'); } 

Ce qui fonctionne pour moi:

 success: function(text) { setTimeout(function(){ $("#calendar").fullCalendar("rerenderEvents"); },50); } 

Si je le fais directement sans délai d’attente, cela ne fonctionnera pas, probablement en raison de la variable $ element.fullCalendar non encore définie complètement?

Pour FullCalendar v3.8.0, ce qui suit fonctionnera:

 var events = [ {title: 'Business Lunch', start: '2017-12-03T13:00:00'}, {title: 'Meeting', start: '2017-12-13T11:00:00'}, {title: 'Conference', start: '2017-12-18', end: '2017-12-20'}, ]; $('#calendar').fullCalendar({ defaultDate: '2017-12-12', events: function (start, end, tz, callback) { callback(events); } }); events.push({title: 'Party', start: '2017-12-29T20:00:00'}); $('#calendar').fullCalendar('refetchEvents'); 

jsbin

Une ligne fait le travail:

 $('#calendar').fullCalendar('refetchEventSources', 'eventEditXHR.php') 

Réponse tardive, mais cela devrait être le moyen le plus efficace depuis la version 2.8.0.