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 such .fc-day5 or .fc-day17, but in version 1.6.2 it doesn't anymore.

I have a list of several events that are being rendered and I want to set their cell color (the entire day cell, not only the event cell) to a specific color.

I use 'eventRender' to try to set a class

eventRender: function (event, element, monthView) { 
                if (event.className == "holiday") {
                    $day = $date.getDate();
                    $("td.fc-day-number[value='" + $day + "']").addClass("holiday");
                }
            },

Let me know if you have any idea on how to set the background color.

Ciliata

How are you getting your event data? – Planetstruck

Answer 1

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>

Chlorothiazide

This is changing event color not cell background color of full calendar. BTW i am using full calendar 4 version. Thanks. – Cigar

Answer 2

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.

Lineation

Thanks for your response, but I don't want to set the event background, I want to set the entire cell background (the one containing the event). – Ciliata

For the next visitors seeing this: pay special attention to the date format because it needs the leading zero to work. I mean: '2015-3-4' won't work while '2015-03-04' will. This post helped me to overcome the leading zero. – Housebreak