jQuery fullcalendar not showing events in IE9

Question

I'm trying to get jQuery fullcalendar work in IE9. So far it's working perfectly in Firefox and Chrome. I'm 100% sure I don't have any commas at the end of any object.

IE's developer console isn't showing any errors, completes the request and shows exactly the same JSON response as FF/Chrome (multi-line-formatted for readability):

[
    {
        "beschreibung":"",
        "end":"2012-07-05 19:00:00",
        "username":"dm",
        "ort":"hier",
        "allDay":"",
        "id":"763-1340202369",
        "title":"termin für den nächsten monat",
        "start":"2012-07-05 17:00:00"
    },{
        "beschreibung":"dfgsfdg",
        "end":"2012-07-31 12:00:00",
        "username":"dm",
        "ort":"",
        "allDay":"",
        "id":"UBePvX8AAQEAACyIg",
        "title":"termin für heute",
        "start":"2012-07-31 10:00:00"
    }
]

Here's my code:

$o = {
    calOptions: { unselectCancel:'.calEdit', theme: true, buttonText: { today:'Heute', month:'Monat', week:'Woche', day:'Tag' }, monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'], dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], timeFormat: 'H(:mm)', axisFormat: 'H(:mm):00', header: { left:'prev,next today', center:'title', right:'month,agendaWeek,agendaDay' }, editable: true, allDayText: 'Ganztägig', firstDay: 1, firstHour: 8, allDaySlot: false, allDayDefault:false }
}    

$('#db .fullCalendar').fullCalendar(
    $.extend(
        $o.calOptions, {
            events: {
                url: 'c.pl',
                type: 'POST',
                data: {
                    j: 'json',
                    x: 'c'
                },
                error: function(){

                }
            }
        }
    )
);

Now here's the thing I don't get at all. When I set the events object to the JSON-response, IE9 can display them:

$('#db .fullCalendar').fullCalendar(
    $.extend(
        $o.calOptions, {
            events: [{"beschreibung":"","end":"2012-07-05 19:00:00","username":"dm","ort":"hier","allDay":"","id":"763-1340202369","title":"termin für den nächsten monat","start":"2012-07-05 17:00:00"},{"beschreibung":"dfgsfdg","end":"2012-07-31 12:00:00","username":"dm","ort":"","allDay":"","id":"UBePvX8AAQEAACyIg","title":"termin für heute","start":"2012-07-31 10:00:00"}]
        }
    )
);

Any ideas what could be wrong? I don't know where to continue searching...

Answer 1

Make sure you set the response content type to

application/json

Edit

I think the options object structure is not correct
Replace this

    $o = {
     calOptions: {
         unselectCancel: '.calEdit',
         theme: true,
         buttonText: {
             today: 'Heute',
             month: 'Monat',
             week: 'Woche',
             day: 'Tag'
         },
         monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
         dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
         dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
         timeFormat: 'H(:mm)',
         axisFormat: 'H(:mm):00',
         header: {
             left: 'prev,next today',
             center: 'title',
             right: 'month,agendaWeek,agendaDay'
         },
         editable: true,
         allDayText: 'Ganztägig',
         firstDay: 1,
         firstHour: 8,
         allDaySlot: false,
         allDayDefault: false
     }
 }

With this

$o = {
    unselectCancel: '.calEdit',
    theme: true,
    buttonText: {
        today: 'Heute',
        month: 'Monat',
        week: 'Woche',
        day: 'Tag'
    },
    monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
    dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
    timeFormat: 'H(:mm)',
    axisFormat: 'H(:mm):00',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    allDayText: 'Ganztägig',
    firstDay: 1,
    firstHour: 8,
    allDaySlot: false,
    allDayDefault: false
}

Answer 2

I've been using Fullcalendar v1.5.4 with IE9 and the events would not appear on the calendar (ajax source). But for some odd reason that I don't really understand, opening the developper toolbar (F12) and then refreshing the page makes the events appear.

This can be used as a temporary fix.