CODEWITHSUNDEEP
fullcalendar
fes
fes

Reputation: 2515

fullcalendar backgroundColor property

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

Upvotes: 4

Views: 9022

Answers (6)

Phil Jefferies
Phil Jefferies

Reputation: 33

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

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

Upvotes: 0

xtds
xtds

Reputation: 2513

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.

Upvotes: 1

George Cristian Boteanu
George Cristian Boteanu

Reputation: 46

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/

Upvotes: 0

Phil McCarty
Phil McCarty

Reputation: 486

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');

Upvotes: 0

fes
fes

Reputation: 2515

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.

Upvotes: 11

Sharvari
Sharvari

Reputation: 257

try this may be it works for you.

 background: '#eeeef0

Do not write backgroundColor.

Upvotes: -3

Related Questions