FullCalendar for Angular - Custom CSS Styling

Question

I am using FullCalendar for Angular and I am having trouble applying custom styling. I need to change the background colour of the 'More Events' Popover, but no matter what I try, none of my styles are applying.

I am putting these styles into foo.component.scss:

    .fc-popover  .fc-more-popover .fc-day .fc-day-mon .fc-day-past .fc-day-other{
        background: #303030 !important;
    }

I can see in the classes that I have copied from inspect on Chrome references only one day, but it doesnt even apply to that day.

I have tried more generic class names such as:

.fc .fc-popover .fc-more-popover

to no avail.

I have also tried putting the styles in a style tag directly in the component template, and I have tried putting the styling into the main styles.scss file.

When I edit the styles in the inspect tab in my browser, it applies and achieves the desired result, but I just can't get these styles to apply any other way.

Did you check the official documentation? fullcalendar.io/docs/css-customization — Roy
– Roy, Commented Apr 26, 2022 at 9:48
@Roy of course I did. I am attempting to use the method as demonstrated in Technique 1, Technique 2 is not suitable for me. — Mahogany
– Mahogany, Commented Apr 26, 2022 at 9:52

user17740968 · Accepted Answer · 2022-04-26 09:46:30Z

2

Angular has something called view encaspulation.

Without going to deep or being too complicated, it means that heach view has its own ecosystem, so that they can't collide with each other when it comes to styles.

So a style like .container in app.component.scss, won't collide with a .container in home.component.scss.

To avoid view encapsulation, you have one of two solutions.

The nasty one, ::ng-deep, is to be avoided. So it leaves you with a single one : move your styles into the style.scss file, where there is no view encapsulation.

Lastly, if it still does not work, try adding !important to your styles (and remove it after testing, it's nasty too) : if the style gets applied with !important, it means your CSS selectors are not "strong" enough, so try "strenghtening" them.

answered Apr 26, 2022 at 9:46

user17740968

Sign up to request clarification or add additional context in comments.

3 Comments

Mahogany Over a year ago

Thank you for your answer but in my question you'll see that I have already tried both of your recommendations.

user17740968 Over a year ago

@Mahogany did you combine them all at once ?

user17740968 Over a year ago

If so, then you have the wrong selectors.

Collectives™ on Stack Overflow

FullCalendar for Angular - Custom CSS Styling

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related