I'm struggling with custom styling using FullCalendar for Angular. Specifically, I need to change the background color of the 'More Events' Popover, but no matter what I attempt, my styles aren't taking effect.
I've been trying to apply these styles in foo.component.scss:
.fc-popover .fc-more-popover .fc-day .fc-day-mon .fc-day-past .fc-day-other{
background: #303030 !important;
}
Although I've noticed that the classes I copied from inspecting on Chrome only reference one day, the style isn't even applying to that individual day.
I've also experimented with more general class names like:
.fc .fc-popover .fc-more-popover
without success.
I've attempted adding the styles directly into the component template within a style tag and have also tried including them in the main styles.scss file.
Interestingly, when I modify the styles in the inspect tab of my browser, they take effect and achieve the desired outcome. However, I can't seem to get these styles to work through any other method.