web-dev-qa-db-fra.com

Comment puis-je charger tous les événements du calendrier avec Ajax?

Je souhaite charger tous les événements sur FullCalendar en utilisant AJAX lorsque j'ai cliqué sur bouton suivant/précédent dans agenda-views.

Je suppose que, quand cliquera sur le bouton next-previous-button alors j'enverrai le date('y-m-d') actuel au url: 'fetch-events.php' puis il retournera les données au format event{ id: ,title: , start: , end: , allDay: } pour le rendu dans 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

ajaxfullcalendar
12
Frank

Frank, vous avez la réponse au document en ligne de FullCalendar: http://arshaw.com/fullcalendar/docs/event_data/events_function/

8
jpardobl

De la documentation en ligne FullCalendar

FullCalendar appellera cette fonction chaque fois qu'elle aura 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 recevra les paramètres start et end, qui sont Moments indiquant la plage pour laquelle le calendrier a besoin d'événements.

timezone est une chaîne/boolean décrivant le courant .__ du calendrier. fuseau horaire. C'est la valeur exacte de l'option timezone .

On lui donnera également callback, une fonction qui doit être appelée quand la fonction d'événement personnalisé a généré ses événements. C'est l'événement La fonction est responsable de s'assurer que callback est appelé avec un tableau de Objets d'événement .

Voici un exemple montrant comment utiliser une fonction d’événement pour extraire événements 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);
            }
        });
    }
});

La 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);
            }
        });
    }
});

Notes:start et endDOIVENT être ISO 8601 . Un autre changement est l'utilisation de format au lieu de unix (cela m'a facilité la gestion du code-behind).

11
Michel Ayres
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    
});
1
Jigs17

Hey regarde ma réponse. J'ai fait face au même problème et je l'ai fait fonctionner! Voici le lien

Maping Events to FullCalender using JSON

0
Aimal Khan