Fullcalendar v5 Angular CSS Customization not working

Question

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)?

Answer 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.