jQuery Fullcalendar not rendering events in IE

Question

Just as the title says, its not rendering events on any version of IE.

Using IE from 7 to 10 and none of the versions renders the event. Jquery 1.11.0 and fullCalendar 1.6.4.

If I manually put in events it works perfectly, but with the events I fetch from my ajax call it will not display any events at all, all other browsers display them no problem.

I get my events from an ajax call that I then parse to an array of JSON objects. The raw data received from my call looks like this:

[
  [
    {
      "start": "2014,05,01",
      "title": "Event test 2",
      "content": "Avec du texte pour en mettre plus",
      "ID": 153
    }
  ],
  [
    {
      "start": "2014,04,16",
      "title": "Event test",
      "content": "<p>Du texte pour le premier événement.</p>",
      "ID": 118
    }
  ],
  [
    {
      "start": "2014,04,10",
      "title": "Event test",
      "content": "<p>Du texte pour le premier événement.</p>",
      "ID": 118
    }
  ]
]

After that I loop in the 2 dimension array to fetch each individual object and push it into another array, code that does this is:

for(var i = 0; i < jsonData.length; i++){           
  for(var k = 0; k < jsonData[i].length; k++){
    dataEvents.push(jsonData[i][k]);
  }
}

Now if I just hardcode an array of the above mentioned JSON objects manually into the events property of fullCalendar it works, why would it not work when its an array created by a loop?

IE shows no errors, no file is not being loaded (or loaded twice). I have invested several hours looking into similar question (trailing commas seems to be the most common mistake) but nothing that has specifically helped me other than to isolate the problem.

Thanks, I hope you guys can help me and others that may find the same problem solve it.

Edit: added versions.

Editted to add versions. IE 7 to 10, jQuery 1.11.0 and fullCalendar 1.6.4. — Victor D.

Victor D. Victor D. · Accepted Answer · 2014-07-04T19:53:38

After meddling with it a bit, I managed to get it working. I ended up changing a few things. First, changed the string format to use dashes "-" instead of commas, so the new JSON object looked like this:

[
  [
    {
      "start": "2014-05-01",
      "title": "Event test 2",
      "content": "Avec du texte pour en mettre plus",
      "ID": 153
    }
  ],
  [
    {
      "start": "2014-04-16",
      "title": "Event test",
      "content": "<p>Du texte pour le premier événement.</p>",
      "ID": 118
    }
  ]
]

And then, changed the way I was construction my objects that were getting passed to the fullCalendar:

    for(var i = 0; i < jsonData.length; i++){           
        for(var k = 0; k < jsonData[i].length; k++){
            /* creating date object instead of string */
            var d = new Date(jsonData[i][k]['start']);

            /* adding one day, it was showing the previous day (due to localisation?) */
            d.setDate( d.getDate() + 1);

            /* manually setting the object, and adding 'allDay':true , in my case I need them to be all day events */
            dataEvents.push({
                        'start' : d,
                        'title' : jsonData[i][k]['title'],
                        'content' : jsonData[i][k]['content'],
                        'ID' : jsonData[i][k]['ID'],
                        'allDay' : true
                    });
        }

    }

It was working fine after that. I guess IE cannot interpret strings to date the same way other browsers do. By the way, safari was showing the same results as IE, it was not displayed the events, after this change everything is displaying properly in all mayor browsers.

I will post a link to the working page once it is live (currently live in our private prod servers, but it should be migrated to live servers soon).

jQuery Fullcalendar not rendering events in IE

1 Answers