Angular-calendar: Please allow styling of event colors with css variables by switching to ngStyle

[RobertProvencal]

Hi Matthew

Would it be possible to switch the css attribute used for styling an event color and border to use the angular notation? Doing this would allow an end-user to leverage css variables and make our css less hard coded.

For example within the calendar-week-view-event-component.ts, you will find
<div class="cal-event" [style.backgroundColor]="weekEvent.event.color?.secondary" [style.borderColor]="weekEvent.event.color?.primary" ....

Ideally, we would like to see:
<div class="cal-event" [ngStyle.backgroundColor]="weekEvent.event.color?.secondary" [ngStyle.borderColor]="weekEvent.event.color?.primary" ...

This would allow us to change our css file from say:

Blue: { primary: '#89CFF0', // --nw-color-spectrum-blue-light secondary: '#B3F0FE' // --nw-color-brand-1 }
to:

Blue: { primary: 'var(--nw-color-spectrum-blue-light)', secondary: 'var(--nw-color-brand-1)' }
Does that make sense? Please let me know if you need additional info.

Thanks,
Robert.

Minimal reproduction of the problem with instructions

Versions

• angular-calendar:
• Browser name and version: Chrome v71

[mattlewis92]

Hey, apologies for the late reply, I tried to do [ngStyle.backgroundColor]="weekEvent.event.color?.secondary" but it doesn't seem to work. I checked and it doesn't seem like angular has any support for CSS variables: https://github.com/angular/angular/issues/9343 I'd love to support them though, if you know of a way that we could support them easily?

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[gtoroptsev]

Hey, apologies for the late reply, I tried to do [ngStyle.backgroundColor]="weekEvent.event.color?.secondary" but it doesn't seem to work. I checked and it doesn't seem like angular has any support for CSS variables: angular/angular#9343 I'd love to support them though, if you know of a way that we could support them easily?

Hi Matthew,
Please try this code, it allows to set background color without angular sanitize console error

[ngStyle]="{'background': weekEvent.event.color?.secondary}"

[mattlewis92]

It doesn't work for me: https://stackblitz.com/edit/angular-fzjdae?file=demo/template.html Can you show me an example of it working?

[gtoroptsev]

It doesn't work for me: https://stackblitz.com/edit/angular-fzjdae?file=demo/template.html Can you show me an example of it working?

https://stackblitz.com/edit/angular-fzjdae-xrmgys?file=demo%2Ftemplate.html

at first we define css variables in styles.css

:host { --blue-primary: #1e90ff; --blue-secondary: #D1E8FF; }

then assign them to colors object (wrapped in var())

const colors: any = { blue: { primary: 'var(--blue-primary)', secondary: 'var(--blue-secondary)' } };

and last step is to assign colors obj properties to our dom element

[ngStyle]="{ 'color': colors.blue.primary, 'background-color': colors.blue.secondary }">

I think it will be useful in projects with multiple themes - just save css variables of calendar event objects
or in case if designer apply color palette updates we don't need to apply db migrations etc.

[mattlewis92]

Ahhh, I see what I was doing wrong now, I missed off the var() surrounding the variable name, ok this should be doable!

[mattlewis92]

Fixed in 0.27.2 🎉

[gtoroptsev]

Fixed in 0.27.2 🎉

thank you, it works now!