Question

I tried copying the exact same code from the FullCalendar Homepage. So I have:

$(document).ready(function () {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d - 5),
                    end: new Date(y, m, d - 2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d - 3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d + 4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d + 1, 19, 0),
                    end: new Date(y, m, d + 1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
    });

});

I have verified that my site correctly includes the fullcalendar.css and fullcalendar.print.css.

However, my page comes up as:

http://dl.dropbox.com/u/6753359/badcalendar.PNG

Notice my events are not blue like their examples. I tried setting the color property in the events, I tried giving the events a className, nothing is making my events have color.

---

Edit:
When I inspect my “All Day Event” event, Chrome shows me the following divs:
http://dl.dropbox.com/u/6753359/badcalendarEventElement.PNG

And as far styles being used, Chrome shows me:

http://dl.dropbox.com/u/6753359/badcalendarCss.PNG

---

Does anyone know how I can fix this?

Answer 1

try adding media=”print”

<link rel="stylesheet" href="fullcalendar.print.css" type="text/css" media="print" />

your print style sheet is overriding your screen style sheet.