Как загрузить все события в календаре с помощью Ajax?

Ответ 1

Фрэнк у вас есть ответ в онлайн-документе FullCalendar: http://arshaw.com/fullcalendar/docs/event_data/events_function/

Ответ 2

Из онлайн-документации FullCalendar

FullCalendar будет вызывать эту функцию всякий раз, когда ей нужны новые данные о событиях. Это срабатывает, когда пользователь нажимает кнопку prev/next или переключает виды.

Эта функция будет задана параметрами start и end, которые Моменты, обозначающие диапазон, в котором нужны календарные события.

часовой пояс - строка/логическое значение, описывающее текущий календарь часовой пояс. Это точное значение параметра timezone.

Он также будет иметь callback, функцию, которая должна вызываться, когда пользовательская функция события генерирует свои события. Это событие чтобы убедиться, что обратный вызов вызывается с массив Объекты событий.

Вот пример, показывающий, как использовать функцию события для извлечения события из гипотетического XML-фида:

$('#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);
            }
        });
    }
});

Источник

Я сделал несколько небольших изменений:

$('#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);
            }
        });
    }
});

Примечания: start и end ДОЛЖЕН быть ISO 8601. Другим изменением было использование format вместо unix (мне стало легче справляться с кодом)

Ответ 3

Эй, посмотри на мой ответ. Я столкнулся с той же проблемой и заставил ее работать! Вот ссылка

Отображение событий в FullCalender с помощью JSON

Ответ 4

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