How can I load all events on calendar using Ajax?

Question

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

score 25 · Answer 1 · edited May 23 '17 at 12:18

From the FullCalendar Online Documentation

FullCalendar will call this function whenever it needs new event data. This is triggered when the user clicks prev/next or switches views.

This function will be given start and end parameters, which are Moments denoting the range the calendar needs events for.

timezone is a string/boolean describing the calendar's current timezone. It is the exact value of the timezone option.

It will also be given callback, a function that must be called when the custom event function has generated its events. It is the event function's responsibility to make sure callback is being called with an array of Event Objects.

Here is an example showing how to use an event function to fetch events from a hypothetical XML feed:

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

Source

I made some little changes:

$('#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 and end MUST be ISO 8601. Another change was the use of format instead of unix (this made easier for me to deal with the code-behind)

@SbonisoMarcusNzimande you could refresh all the content, if it's what you need. — Michel Ayres, Apr 13 '15 at 12:46
@MichelAyres The problem was not refreshing, I was showing the calendar according to filters. This means I was getting the events from different links this caused a problem in duplicating the events — Sboniso Marcus Nzimande, Apr 14 '15 at 07:49
@SbonisoMarcusNzimande create a new question with your code and specify the needs and problems that you're facing. Otherwise, we'll fill up this comment session to solve your problem =) — Michel Ayres, Apr 14 '15 at 12:37
@MichelAyres does this code prints also the events in the calendar? cause in my case it does not — Dimitris Papageorgiou, Feb 05 '16 at 14:52

score 3 · Answer 2 · answered Dec 04 '19 at 12:15

3

There is a built in option avaliable

var calendar = new FullCalendar.Calendar(calendarEl, {
    events: '/myfeed.php'
})

more details https://fullcalendar.io/docs/events-json-feed

answered Dec 04 '19 at 12:15

Sarath Ak

7,903
2
47
48

score 1 · Answer 3 · answered May 16 '17 at 09:38

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

absolutkarlos · Answer 4 · 2020-08-04T12:16:52.163

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

}

you cannot add header with this :) Correct me if i am wrong :) — pioupiou, Nov 18 '20 at 20:09

user21051985 · Answer 5 · 2023-01-20T18:58:48.360

var events= '';
    $.ajax({
      url: '/eventoscalendar',
      dataType: 'json',
      type: 'GET',
      success: function(data) {
        events= JSON.stringify(data);
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            editable: true,
            displayEventTime: true,
            selectable: true,
            droppable: false,
            events: JSON.parse(events)
        });
      }
    });

y en /eventoscalendar 

public function eventoscalendar()
  {
        $events[]= [
                "title" =>'Meeting',
                "start"=> date('Y-m-d'),
                "allDay"=> false,
                "url"=> 'http://google.com/'                    
        ]; 
        return JsonResponse::create($events, 200, array('Content-Type'=>'application/json; charset=utf-8' ));
    }

How can I load all events on calendar using Ajax?

5 Answers5

Linked