Angular-calendar: Allow the setting of classes dynamically, not just specific colours

[oldschoolbg]

Is your feature request related to a problem? Please describe

I am attempting to style each cal-event (thought this would apply to all elements on the calendar) based on classes assigned dynamically based on the event type, for example, that is being displayed. Currently I have to set the "primary" and "secondary" colour in the data when I am building this in my business logic layer however this means that my display logic is bleeding into my business logic layer.

Describe the solution you'd like

I would like to be able to pass one or more classes to be applied to the template (in this case the day event):

class="cal-event" [ngClass]="dayEvent.event.customClass" [style.backgroundColor]="dayEvent.event.color?.secondary" [style.borderColor]="dayEvent.event.color?.primary"

The challenge will be to ignore the event.color settingsif a customClass is provided.

Describe your use case for implementing this feature

As described above this will allow me to keep the styling information firmly in the presentation layer as I can describe the content and not have to define colours in my logic layer.

Additional context

Nothing to add

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

[oldschoolbg]

I should add that I am more than happy to do a PR for this, if this idea is accepted; I am more asking "is it worth my time to put this in"... Cheers :)

[mattlewis92]

Hey, thanks for opening an issue, this is actually possible already by using the cssClass property on events. You can skip adding the color and use that instead, and then apply some global CSS to set your colors on events. I put together an example for you on how to do it for the month view (https://stackblitz.com/edit/angular-rkdjrr?file=demo/component.ts), but the same idea applies for the week and day view as well. You can probably use a sass mixin to DRY up the theming code. If you have any questions on it, please let me know. Hope that helps! 😄

[oldschoolbg]

That is wonderful! Thank you for the example as well.

I was surprised to not see it (immediately - clearly my scan through was not deep enough) so I'm pleased it was just me being silly and missing it.