How to load calendar events from static JSON file using fullcalendar.js

Question

I was using FullCalendar.js library to render events from a static JSON file which resides in the same folder. I have written the code like below, please help me on the same.

HTML Code

 <div id="calendar"> </div> 

jQuery Code

$(document).ready(function(){
    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: 'prev,title,next',
            right: 'month,agendaWeek,agendaDay'
        },
        events: function (start, end, timezone, callback) {
            $.ajax({
                url: 'static-calendar-events.json',
                type: "GET",
                datatype: 'json',
                success: function (doc) {
                    var events = [];
                    if ($(doc) != undefined && $(doc).Events.length > 0) {
                        $(doc).Events.forEach(function (Obj) {
                            events.push({
                                title: Obj.Title,
                                start: Obj.Start,
                                end: Obj.End
                            });

                        });
                    }
                    callback(events);
                },error: function (err) {
                    alert('Error in fetching data');
                }
            });
        },
        defaultView: 'agendaWeek',
        eventClick: function (calEvent, jsEvent, view) {
            alert(calEvent.title);
        }
    });
});

Static JSON File

[
    {
        "title": "Calendar Test",
        "start": "2014-06-01 18:30:00",
        "end": "2014-06-01 19:00:00",
        "allDay": false
    },
    {
        "title": "Calendar Test 1",
        "start": "2014-06-02 18:30:00",
        "end": "2014-06-02 19:00:00",
        "allDay": false
    },
    {
        "title": "Calendar Test 2",
        "start": "2014-06-03 18:30:00",
        "end": "2014-06-03 19:00:00",
        "allDay": false
    }
]

When I run the above code it is giving me error as 'callback undefined' and initially it gives me error as 'Error in fetching data'. I am running this through a Webserver.

Answer 1

You don't have a super object Events in the JSON file, so each doc entry will be doc.title, doc.start, etc. Also, it's not necessary to access doc as a jQuery object.

success: function ( doc ) {
    var events = [];
    if ( doc != undefined && doc.length > 0 ) {
        doc.forEach( function( entry ) {
            events.push({
                title: entry.title,
                start: entry.start,
                end:   entry.end
            });
        });
    }
    callback(events);
}