'Fullcalendar v5 Angular CSS Customization not working

I'm using Fullcalendar v5 in our Angular project and want to change, lets say, the Fullcalendar toolbar title color and size.

In my styles.scss I added following CSS code:

.fc .fc-toolbar-title {
  font-size: 1.2em;
  color: blue !important;
}

To rule out possible implementation errors I also retried this using the agular example project. The custom CSS changes are not applied here either. I guess it's because the Fullcalendar stylesheet is loaded AFTER my statements.

How can further CSS adjustments be made to the fullcalendar (except for the provided common CSS variables)?

htmlcssangularfullcalendarfullcalendar-5


Solution 1:[1]

Okay, I was able to solve it myself. Just add the custom CSS code statements in the globas.scss file, which will be applied after the fullcalendar stylesheet.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sync

Related Questions