Angular-calendar: Month View > Day Highlight > Toggle css class instead of backgroundColor

[vgebrev]

Is your feature request related to a problem? Please describe

I am busy applying my own theme to the calendar, and I'm only able to customize the month view day highlight (hover over event) by specifying the event's secondary color in code (or it defaults to #D1E8FF).

Describe the solution you'd like

Instead of toggling the cell's backgroundColor style directly in CalendarMonthViewComponent.toggleDayHighlight, it would be nice if a css class was toggled, eg cal-highlighted (or user-specified per event, as with the colors).

Describe your use case for implementing this feature

Implementing this would reduce hard-coded styling and make it easier to theme the calendar with pure css.

Additional context

As a work-around, would you recommend a custom month view component? I see no way of exposing the highlight logic otherwise.

Thank you for an amazing component 🥇

[mattlewis92]

Great idea! I've just added this into the 0.26 branch, instructions for how to install it in your app are available over at the PR: https://github.com/mattlewis92/angular-calendar/pull/589 Let me know if that works for you 😄

[vgebrev]

Hi @mattlewis92,

Wow, that was quick, thank you!

I am now able to style the highlighted cells in the month view as follows:

.cal-month-view .cal-cell.cal-event-highlight {
  background-color: mat-color($primary, 600) !important; //need !important to override in-line style
}

This works for me because I only have one highlight/event color.
Just a note, for scenarios where multiple event colors are required, one would have to fallback to explicit event colors.