Setting Fullcalendar Cell Background Color

Question

I saw several topics on how to set the background color of a cell in fullcalendar, but none of them worked for me. I guess the calendar used to list the days using their date as

Answer 1

You can try to set event background color. Something like this:

event.backgroundColor = 'cccccc#';

Or for cell background:

$('.fc-day[data-date="' + date + '"]').css('background', color);

date must be date string equivalent to php Y-m-d date format. Style need change when calendar was rendered.

Answer 2

Well, you can do this.

{
  title: 'Some title',
  start: new Date(2014, 8, 24, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor',
  borderColor: '#SomeColor'
},
{
  title: 'Some title2',
  start: new Date(2014, 8, 24, 10, 30),
  allDay: false,
  editable: false,
  backgroundColor: '#SomeColor2',
  borderColor: '#SomeColor2'
}

In addition, you can set class name like this:

{
  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  className: ["red"]
},
{
  title: 'Teste1',
  start: new Date(y, m, d, 10, 30),
  allDay: false,
  editable: false,
  className: ["green", "secondClass"]
}

Then describe that style of class

<style>

.red {
    background-color:red;
}

.green {
    background-color:green;
}
.green{
// do something
}
</style>