Question

I’m using the FullCalendar plugin in a CodeIgniter application. I’m retrieving event objects with a GET request server side and the events do not show on the calendar using a similar approach to the events as a function example with a callback. I have verified that the GET request returns json properly.

Here is the json returned by my request…

[{"id":"1","title":"2011 Acura Integra (1)","start":1313996400,"color":"red"}, {"id":"15","title":"2011 Acura Integra (1)","start":1314774000,"color":"red"}]

My call is as follows…

    var year = $("#year").text();
    var month = $("#month").text();

    $maintenance_schedule_calendar_table = $("#vehicles_maintenance_schedule_calendar").fullCalendar({
        year: year,
        month: month -1,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        editable: true,
        disableResizing: true,
        events: function(start, end, callback) {
            var start_timestamp = Math.round(start.getTime() / 1000);
            var end_timestamp = Math.round(end.getTime() / 1000);
            var url = "/tripsys/new_admin/vehicles/get_maintenance_schedule_data/" + start_timestamp + "/" + end_timestamp;

            $.get(url, function(events) {
                callback(events);
            });
        }
    });

The strange thing is that the previous call fetches the json properly and the callback seems to process the events because if I call the .fullCalendar(‘clientEvents’) it shows the json that I passed into the events method, but they do not render.

However if I pass this same json into my initial FullCalendar call directly the events do render…

    var year = $("#year").text();
    var month = $("#month").text();

    $maintenance_schedule_calendar_table = $("#vehicles_maintenance_schedule_calendar").fullCalendar({
        year: year,
        month: month -1,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        editable: true,
        disableResizing: true,
        events: [
            {"id":"1","title":"2011 Acura Integra (1)","start":1313996400,"color":"red"},
            {"id":"15","title":"2011 Acura Integra (1)","start":1314774000,"color":"red"}
        ]
    });

Does anyone have any idea why the first example is not rendering the events on my calendar?

Answer 1

Turns out that the problem was caused by me requesting the data with $.get instead of with $.getJSON

This is the correct call…

    var year = $("#year").text();
    var month = $("#month").text();

    $maintenance_schedule_calendar_table = $("#vehicles_maintenance_schedule_calendar").fullCalendar({
        year: year,
        month: month -1,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        editable: true,
        disableResizing: true,
        events: function(start, end, callback) {
            var start_timestamp = Math.round(start.getTime() / 1000);
            var end_timestamp = Math.round(end.getTime() / 1000);
            var url = "/tripsys/new_admin/vehicles/get_maintenance_schedule_data/" + start_timestamp + "/" + end_timestamp;

            $.getJSON(url, function(events) {
                callback(events);
            });
        }
    });