javascript - tutorial - reenvío de eventos en fullCalendar después de la actualización de la base de datos Ajax

fullcalendar ejemplos

Question

Estoy intentando que fullCalendar refleje los cambios realizados en una base de datos a través de AJAX. El problema es que no actualizará el calendario en pantalla después de una llamada AJAX exitosa.

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

Estoy usando el método equivocado? ¿Cuál sería la mejor manera de lograr esto sin tener que recargar toda la página? Gracias por cualquier entrada!

Answer 1

Esto es lo que funciona en ASP.NET CORE, MVC 6:

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

Mientras esto funcionaba en ASP.NET MVC 5:

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

Answer 2

Hay varias maneras. Algunos menos elegantes.

1. Si está utilizando FullCalendar para capturar eventos json:

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

Solo haz:

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

Si quieres un método externo para buscar eventos, puedes hacerlo. No es elegante pero funcionará

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

Answer 3

Lo que funciona para mí:

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

Si lo hago directamente sin tiempo de espera, no funciona, ¿es probable debido a que la variable $ element.fullCalendar aún no está completamente establecida?

Answer 4

Para FullCalendar v3.8.0 funcionará lo siguiente:

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

Answer 5

Puedes renderizar eventos en 3 pasos ..

1) eliminar todos los eventos

.fullCalendar( ''removeEvents'');

2) añadir el evento

.fullCalendar( ''addEventSource'', events);         

3) render eventos

.fullCalendar( ''rerenderEvents'' );

Me gusta...

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

Answer 6

Una línea hace el trabajo:

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

Respuesta tardía, pero esta debería ser la forma más eficiente desde 2.8.0