fullcalendar backgroundColor property

Question

I'm trying to add a background color to an event but with no luck.

$('#calendar').fullCalendar('renderEvent', { id: 1, title: 'hello', start: selected_date, allDay: true, color: '#FF0000', backgroundColor: '#000000' }, false);

Any idea why this won't work? The border color seems to work but not the backgroundColor

Answer 1

If you add both the stylesheets then the backgroundColor will not work.

<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.css" />
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.print.css")" />

After removing the fullcalendar.print.css then the backgroundColor decided to render correctly.

Answer 2

Add the media attribute

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

I was setting it up in my bundle config in asp but that didn't add the media property so it was an issue.