CODEWITHSUNDEEP
cssangularfullcalendar
Mahogany
Mahogany

Reputation: 529

FullCalendar for Angular - Custom CSS Styling

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.

Upvotes: 0

Views: 1437

Answers (1)

user17740968
user17740968

Reputation:

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.

Upvotes: 2

Related Questions