Events not getting rendered with JSON feed.

Question

I am trying to use a JSON feed to render events in fullCalendar. Here is the code.

        $('#calendar').fullCalendar({

            editable    : true,
            selectable  : true,
            select      : selectionMade,
            eventResize : eventsChanged,
            eventDrop   : eventsChanged,
            selectable  : true,
            eventRender : beforeRenderEvent,
            weekend     : false,
            defaultView : "agendaWeek",
            eventClick  : eventClicked,
            theme       : true,
            aspectRatio : 1.5,
            events      : '<%= shifts_path %>',                    
            header      : 
            {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            }
        });

Shifts_path is the path of the shifts controller. Its a rails app. The request back to the json feed is working. When I view the ajax requests that have been made the request back to shifts path its there and is returning with no error. The events however do not get rendered on the calendar and it remains blank. When I call the clientEvents method of fullcalendar it returns an empty array. I tried pasting the JSON that the server is returning directly inline with the code. When doing this the events are rendered fine. Here is an example of the JSON that the server is returning.

[
    {
        title   : 'New shift',
        start   : '2010-10-25 09:30:00 +0100',
        end     : '2010-10-25 13:30:00 +0100',
        allDay  : false
    },
    {
        title   : 'New shift',
        start   : '2010-10-25 08:00:00 +0100',
        end     : '2010-10-25 14:00:00 +0100',
        allDay  : false
    },
    {
        title   : 'New shift',
        start   : '2010-10-25 08:00:00 +0100',
        end     : '2010-10-25 14:00:00 +0100',
        allDay  : false
    },
    {
        title   : 'New shift',
        start   : '2010-10-27 08:00:00 +0100',
        end     : '2010-10-27 13:30:00 +0100',
        allDay  : false
    },
]

Any ideas why the events are not rendering?

Answer 1

What you're returning isn't valid JSON, so starting with version 1.4, jQuery will reject and not even attempt to parse it.

There are 2 issues, your names and values should be double quoted, like this: "title" : "New shift" and there's a trailing comma after the last event in the array. Overall your example JSON should look like this:

[
    {
        "title" : "New shift",
        "start" : "2010-10-25 09: 30: 00 +0100",
        "end" : "2010-10-25 13: 30: 00 +0100",
        "allDay" : false 
    },
    {
        "title" : "New shift",
        "start" : "2010-10-25 08: 00: 00 +0100",
        "end" : "2010-10-25 14: 00: 00 +0100",
        "allDay" : false 
    },
    {
        "title" : "New shift",
        "start" : "2010-10-25 08: 00: 00 +0100",
        "end" : "2010-10-25 14: 00: 00 +0100",
        "allDay" : false 
    },
    {
        "title" : "New shift",
        "start" : "2010-10-27 08: 00: 00 +0100",
        "end" : "2010-10-27 13: 30: 00 +0100",
        "allDay" : false 
    } 
]

You can always check the validity of your JSON using JSONLint.com.