How can I load all events on calendar using Ajax?

user_1063545 0
Viewed 101472

I want to load all events on FullCalendar using AJAX when I clicked next-previous-button in agenda-views.

I guess, when will click on next-previous-button then I'll send current date('y-m-d') to url: 'fetch-events.php' then it will return event{ id: ,title: , start: , end: , allDay: } format data for rendering on calendar

$('#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 not working in my case

fullcalendar ajax
4 Answers
user_47837190

fullCalendar already uses ajax, so you don't have to type it. When I was starting to implement fullCalendar I used the solution of the most voted answer here:

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

but then I could prove, that fullCalendar is in charge of making the ajax call the times the view changes without you having to do anything. I find this plugin very useful, although the documentation did not seem very clear to me.

So this code:

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

is exactly this:

events: schedule.php/load,

you only have to provide the url. Off course you have to deal with a proper JSON response from the server. Or if you need more params you can do it like this:

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

}

user_39274500
Related