Question

I want to show events using the JQuery fullcalendar plugin (version 1.5.2). The JSON data provided to this plugin is:

 [{"start":"2011-10-10","end":"2011-10-11","title":"Electric Picnic","allDay":true},
  {"start":"2011-10-10","end":"2011-10-11","title":"Oxeygen","allDay":true}]

I’ve set allDay to true, but when the events are displayed they look like they start at around 6AM on 2011-10-10.

I’ve also tried using the UNIX timestamp date format instead, but it didn’t make any difference. How can I make the events appear as though they last two whole days.

My fullcalendar code is simply:

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: [{"start":"2011-10-10","end":"2011-10-11","title":"Electric Picnic","allDay":true}, {"start":"2011-10-10","end":"2011-10-11","title":"Oxeygen","allDay":true}],

            // Make the first day of each week a monday
            firstDay: 1,
            weekMode: 'variable',
            header: {
                left:   '',
                center: 'title',
                right:  'today prev,next'
            }
        });
    });

Here’s an example of someone using this plugin to display allDay events properly, but it’s not clear what’s different between their code/data and mine.

You can reproduce this problem locally by downloading this archive, unzipping it, then opening calendar.htm

Answer 1

I figured out it is a problem with your CSS, namely main.css file. The lines 406­-413 create the unnecessary padding.

tr>td:first-child, tr>th:first-child {
    padding-left: 1.25em;
}

tr>td:last-child, tr>th:last-child {
    padding-right: 1.25em;
}

Comment them and the padding from the left (and right) will disappear. Warning: These lines might be in use on other pages of your website, so you better edit them carefully.