Full Calendar - Color of Buttons

[ken1]

How can I change the color of the buttons on the Full Calendar plugin? I would really like them to match my app’s design. I don’t see any built-in fields I can change.

I’ve tried adding this to the page HTML but it doesn’t do anything:

.fc .fc-button-primary:disabled {background-color: #F85A7A !important;}

Second question. How can I get the calendar to fill my page height dynamically? I seem to have to put in a fixed value for the height. If I try using % it disappears.

Thanks!

[Newed]

Try the following:

.fc .fc-button-primary { color: #FFFFF; background-color: #3485FF !important; border-color: #FFFFFF !important; }

As for the height, you should also consider changing the max-width of the calendar. Also, the calendar is made up of a series of nested elements, so it’s not enough just to change the overall wrapper, but also the inner component. Also remembering when using percentage, it will be related to the space of the parent element.

[ken1]

Thank you. I was able to change the button colors now!

As for the height, I was using the height settings in the editor. How do I access the nested elements to also change the height? I’d just like for it to expand to page height (minus padding) just as other elements do.

Thanks!