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

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

Я думаю, когда нажму на следующие-предыдущая кнопки тогда я пошлю ток date('y-m-d') to url: 'fetch-events.php' затем он вернется event{ 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 не работает в моем случае

12
ajax fullcalendar

4 ответов

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

8

из документации Fullcalendar Online

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

эта функция будет предоставлена старт и конец параметры, которые моменты обозначив круг календарь мероприятий для.

часовой пояс является строкой / boolean описание текущего календаря часовой пояс. Это точное значение часовой пояс.

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

вот пример, показывающий, как использовать события функция для выборки события из гипотетического 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 (это облегчило мне работу с кодом)

9

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

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

0
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