How to change cell background color in FullCalendar

0
votes

I am trying to change the background color of cells on a full calendar, regardless of whether there is an event that shares the cell. I have availability data for different times and would like to display a heatmap on my FullCalendar of member availability, a little like a when2meet. I have attempted to do this with uneditable background events without titles, but their background color does not match what I put the background color as (for example, if I set color for a background to "#000000" it displays as light gray).

Is there either a way to add classes to certain time slot cells (for example 8-8:30 on x date) so I can edit their css or to make background color for background events display correctly?

1
cssfullcalendarclojurescript

1 Answers

1
votes

FullCalendar automatically adjusts the colours specified for background events to give them a faded effect.

This is controlled very simply through the "opacity" CSS property of the "fc-bgevent" class, which gets added to every background event's element.

To prevent that you can simply override that property:

.fc-bgevent
{
  opacity: 1;
}

See http://jsfiddle.net/qxLuLhsf/2/ for a working demo