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

Я хочу загрузить все события в полнокалендарном режиме с помощью Ajax, когда я нажал следующий-предыдущий-кнопку в 'views-views'.

Я думаю, когда вы нажмете на следующую-предыдущую кнопку, я отправлю текущую дату ('ym-d') в url: 'fetch-events.php', тогда она вернет событие {id:, title:, start:, end:, allDay:} данные для рендеринга в календаре

$('#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 не работает в моем случае

ОТВЕТЫ

Ответ 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 (мне стало легче справляться с кодом)

Ответ 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    
});