web-dev-qa-db-fra.com

redéfinition des événements dans fullCalendar après la mise à jour de la base de données Ajax

J'essaie que fullCalendar reflète les modifications apportées à une base de données via AJAX. Le problème est qu'il ne mettra pas à jour le calendrier à l'écran après un appel réussi AJAX.

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

J'utilise la mauvaise méthode? Quelle serait la meilleure façon d'y parvenir sans avoir à recharger toute la page? Merci pour toute contribution!

javascriptjqueryajaxfullcalendar
19
Guy

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

1. Si vous utilisez FullCalendar pour récupérer des événements json:

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

Faites juste:

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

Si vous voulez qu'une méthode externe récupère les événements, vous pouvez le faire. Pas élégant mais fonctionnera

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

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

1) supprimer tous les événements

.fullCalendar( 'removeEvents');

2) ajouter une sourse d'événement

.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' );
       }.
     });
45
anupama jirange

C'est 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');
 }
3
Mawycezil

Pour FullCalendar v3.8.0, les éléments suivants fonctionneront:

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

1
vbarbarosh

Ce qui fonctionne pour moi:

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

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

1
WiRa

ne 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

1
user7001007