Comment puis-je charger tous les événements sur le calendrier en utilisant Ajax ?

Question

Je veux charger tous les événements sur FullCalendar en utilisant AJAX quand je clique sur bouton suivant-précédent sur agenda-views .

Je suppose que, quand on cliquera sur bouton suivant-précédent puis j'enverrai du courant date('y-m-d') a url: 'fetch-events.php' alors il retournera event{ id: ,title: , start: , end: , allDay: } format des données pour le rendu sur le calendrier

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    selectable: false,
    selectHelper: false,
    editable: false,

    events: // on-click next-previous button load events using Ajax
    // post date using Ajax, then query to fetch all events and return data             
});

JSON ne fonctionne pas dans mon cas

Answer 1

Extrait de la documentation en ligne de FullCalendar

FullCalendar appelle cette fonction chaque fois qu'il a besoin de nouvelles données d'événement. Ceci est déclenché lorsque l'utilisateur clique sur prev/next ou change de vue.

Cette fonction sera donnée commencer y fin les paramètres, qui sont Moments indiquant la plage pour laquelle le calendrier a besoin d'événements.

fuseau horaire est une chaîne de caractères/un booléen décrivant l'état actuel du calendrier. actuel du calendrier. Il s'agit de la valeur exacte de l'attribut fuseau horaire option.

Il sera également donné rappel une fonction qui doit être appelée lorsque la fonction d'événement personnalisée a généré ses événements. Il est de la responsabilité de la fonction de s'assurer que rappel est appelé avec un tableau de Objets d'événements .

Voici un exemple montrant comment utiliser une fonction d'événement pour récupérer des événements à partir d'un flux XML hypothétique :

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

Source :

---

J'ai fait quelques petits changements :

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        jQuery.ajax({
            url: 'schedule.php/load',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(doc) {
                var events = [];
                if(!!doc.result){
                    $.map( doc.result, function( r ) {
                        events.push({
                            id: r.id,
                            title: r.title,
                            start: r.date_start,
                            end: r.date_end
                        });
                    });
                }
                callback(events);
            }
        });
    }
});

Notas: start y end MUST être ISO 8601 . Un autre changement a été l'utilisation de format au lieu de unix (cela m'a facilité la tâche pour traiter le code-behind)

Answer 2

Une option intégrée est disponible.

var calendar = new FullCalendar.Calendar(calendarEl, {
    events: '/myfeed.php'
})

plus de détails https://fullcalendar.io/docs/events-json-feed

Answer 3

This is perfect way to load data properly.

// if you want to empty events already in calendar.
$('#calendar').fullCalendar('destroy');

$.ajax({
    url: 'ABC.com/Calendar/GetAllCalendar/',
    type: 'POST',
    async: false,
    data: { Id: 1 },
    success: function (data) {
        obj = JSON.stringify(data);
    },
    error: function (xhr, err) {
        alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
        alert("responseText: " + xhr.responseText);
    }
});

/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim($(this).text()) // use the element's text as the event title
    };
    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);
    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });
});

/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
    //isRTL: true,
    buttonHtml: {
        prev: '<i class="ace-icon fa fa-chevron-left"></i>',
        next: '<i class="ace-icon fa fa-chevron-right"></i>'
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //obj that we get json result from ajax
    events: JSON.parse(obj)
    ,
    editable: true,
    selectable: true    
});

Answer 4

FullCalendar utilise déjà ajax, donc vous n'avez pas besoin de le taper. Lorsque j'ai commencé à mettre en œuvre fullCalendar, j'ai utilisé la solution de la réponse la plus votée ici :

https://stackoverflow.com/a/25404081/3927450

mais alors je pourrais prouver, que fullCalendar est en charge de faire l'appel ajax les fois que la vue change sans que vous ayez à faire quoi que ce soit. Je trouve ce plugin très utile, bien que la documentation ne m'ait pas semblé très claire.

Donc ce code :

events: function(start, end, timezone, callback) {
    jQuery.ajax({
        url: 'schedule.php/load',
        type: 'POST',
        dataType: 'json',

c'est exactement ça :

events: schedule.php/load,

vous devez seulement fournir l'url. Bien sûr, vous devez gérer une réponse JSON correcte du serveur. Ou si vous avez besoin de plus de paramètres, vous pouvez le faire comme ceci :

events: {
url: '/myfeed.php',
method: 'POST',
extraParams: {
  custom_param1: 'something',
  custom_param2: 'somethingelse'
},
failure: function() {
  alert('there was an error while fetching events!');
},
color: 'yellow',   // a non-ajax option
textColor: 'black' // a non-ajax option

}