vegas2033 vegas2033 - 12 days ago 5
CSS Question

Setting Fullcalendar Cell Background Color

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.

Answer

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>