Fullcalendar change entire background color for calendar

Question

I simply need to take my rendered Fullcalendar div and change the background from plain white to a dark grey. I'd also like to change the color of text for the dates to white. I'm trying to put this calendar on a darkly themed page.

The documentation is crammed full of how to accomplish this on specific events, specific days, single cells etc. but I haven't found a universal "switch" to flip in the CSS that changes the entire calendar's background color. Been changing every value to lime green in the CSS and pulling my hair out to no affect.

Hoping there is a simple answer!

Answer 1

Not sure about your css as I can't see the code to modify for you, but if you are changing a div for the calender it should just be a simple matter of adding in the background color, the same way you have changed the background of the page.

Your CSS should look like this;

#calendar
{
//* various CSS styles to make calendar
background-color: #A0A8A0;
}

That should give you the background you want if you add in the colour as long as you have a universal div for the calendar. If this doesn't work please paste the code relevant to the calendar.

Hope this helps!

Answer 2

Ok there are a few items that need to be modified in the fullcalendar.css file if the entire background and label text is to be changed. The calendar renders a table over the div, so the table has to be changed.

Find the "table" section in the fullcalendar.css file.

Locate .fc td and add the following

• background-color: #333 !important;
• color: #ffffff;

Also added a new/separate style for .fc th

• color: #ffffff

And added one more style that finds all .fc td with a class of other-month in the name

That selector is .fc td[class*="other-month"] with the following styles specified:

• color: #ffffff;
• Still trying to determine how to change the background color of the other-month class so that it better blends with my page.