CODEWITHSUNDEEP
jsonfullcalendar
melat0nin
melat0nin

Reputation: 869

FullCalendar in IE8 - events not rendering

This is an issue other folk have had but none of the solutions listed elsewhere have worked for me. I'm using FullCalendar 1.5.3 minified (although interestingly the non-minified version is somehow different -- it doesn't call my complete function. That's a different story though).

Here's my generated javascript/JSON (outputted from a DB):

$(document).ready(function() {
    var colours = new Array();
    colours[159] = '#ED8E00';
    colours[160] = '#531493';
    colours[161] = '#69A2E2';
    colours[162] = '#C39';
    colours[163] = '#DEED42';

    $('#calendar').fullCalendar({
       header: {
         left: 'prev,next today',
         center: 'title',
         right: 'month,basicWeek'
       },
       events: [{title: 'Consultation on the Preparation of the EU Adaptation Strategy', url: '/~sniffer/news-diary/calendar/consultation-on-the-preparation-of-the-eu-adaptation-strategy/', start: new Date('2012-07-03T00:00:00'), end: new Date('2012-08-20T00:00:00'), allDay: true, page_id: ''},{title: 'Festival of Politics', url: '/~sniffer/news-diary/calendar/festival-of-politics/', start: new Date('2012-08-18T00:00:00'), end: new Date('2012-08-24T00:00:00'), allDay: true, page_id: ''},{title: 'Consultation on Energy Efficiency Standard for Social Housing closing 28.09.12', url: '/~sniffer/news-diary/calendar/consultation-on-energy-efficiency-standard-for-social-housing-closing-28.09.12/', start: new Date('2012-06-25T00:00:00'), end: new Date('2012-06-25T00:00:00'), allDay: true, page_id: ''},{title: 'Consultation on efficient use of materials closing on 28.09.12', url: '/~sniffer/news-diary/calendar/consultation-on-efficient-use-of-materials-closing-on-28.09.12/', start: new Date('2012-06-27T00:00:00'), end: new Date('2012-06-27T00:00:00'), allDay: true, page_id: ''},{title: 'Launch of the latest Sustainable Consumption Institute (SCI) report', url: '/~sniffer/news-diary/calendar/launch-of-the-latest-sustainable-consumption-institute-sci-report/', start: new Date('2012-07-04T00:00:00'), end: new Date('2012-07-13T00:00:00'), allDay: true, page_id: ''},{title: 'Strathclyde Loch Restoration Phase 1', url: '/~sniffer/knowledge-hubs/resilient-catchments/river-restoration-partnerships/strathclyde-loch-restoration-phase-1/', start: new Date('2012-05-01T00:00:00'), allDay: true, page_id: '161'}],
       eventRender: function(event, element) {
           element.attr('rel', event.page_id);
       },
       timeFormat: 'H(:mm)',
       complete: function() {
           $('#calendar').css('background', 'none');
       }
   });

   // Append coloured pills to events
   function updateEventCats() {
        var colour;
        $('a.fc-event').each(function() {
            var rel = $(this).attr('rel');
            var ids = rel.split('-');

            for (var i=0; i<ids.length; i++) {
                colour = colours['+i+'];
                if (rel != '') {
                   $(this).find('.fc-event-inner').prepend('<div class=\'event-pill\' style=\'background:'+colours[ids[i]]+'\'></div>');
                }
            };
        });
   }

   updateEventCats();

   // Update pills on calendar paging
   $('.fc-button').click(function() {
        updateEventCats();
   });

});

There don't seem to be any unnecessary commas and I don't get any script errors from IE's developer tools. I'm running in IE=edge, so IE8 Standards Mode. The calendar otherwise renders perfectly and pages without any problem.

I've tried disabling the pill stuff so the calendar is rendered vanilla, but that didn't help.

Any suggestions much appreciated.

Upvotes: 0

Views: 3424

Answers (1)

ganeshk
ganeshk

Reputation: 5621

Pass your dates as strings instead of Date objects. Like:

{
  title: 'Consultation on the Preparation of the EU Adaptation Strategy',
  url: '/~sniffer/news-diary/calendar/consultation-on-the-preparation-of-the-eu-daptation-strategy/',
  start: '2012-07-03T00:00:00',
  end: '2012-08-20T00:00:00',
  allDay: true,
  page_id: ''
}

I tested this on IE9 with Browser Mode: IE8 and Document Mode: IE8 standards and it works.

Hope this helps!

Upvotes: 3

Related Questions