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.

Answer 3

The background color for events is defined in the fullcalendar.css file under the section

/* Global Event Styles 

(Line 261, in version 2.0 beta)

You can access it programmatically like this:

$('.fc-event').css('background-color','#3a87ad');   

Answer 4

Try to make it stick (change false parameter to true, at the end), probably a new event is overlapping and make it change properties. "Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.", from Documentation, http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

Answer 5

Here is how I did it: I placed backgroundColor in the chart event:

chart: { 
    type: 'column',
    backgroundColor: 'transparent'
},

Answer 6

try this may be it works for you.

 background: '#eeeef0  

Do not write backgroundColor.