fix: allow setting css variables as event colors

Closes #845

Author: mattlewis92

projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts

@@ -22,8 +22,10 @@ import { PlacementArray } from 'positioning';
     >
       <div
         class="cal-event"
-        [style.backgroundColor]="dayEvent.event.color?.secondary"
-        [style.borderColor]="dayEvent.event.color?.primary"
+        [ngStyle]="{
+          backgroundColor: dayEvent.event.color?.secondary,
+          borderColor: dayEvent.event.color?.primary
+        }"
         [mwlCalendarTooltip]="
           dayEvent.event.title | calendarEventTitle: 'dayTooltip':dayEvent.event
         "

projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts

@@ -38,7 +38,7 @@ import { PlacementArray } from 'positioning';
         <div
           class="cal-event"
           *ngFor="let event of day.events; trackBy: trackByEventId"
-          [style.backgroundColor]="event.color?.primary"
+          [ngStyle]="{ backgroundColor: event.color?.primary }"
           [ngClass]="event?.cssClass"
           (mouseenter)="highlightDay.emit({ event: event })"
           (mouseleave)="unhighlightDay.emit({ event: event })"
@@ -87,8 +87,7 @@ import { PlacementArray } from 'positioning';
     '[class.cal-out-month]': '!day.inMonth',
     '[class.cal-has-events]': 'day.events.length > 0',
     '[class.cal-open]': 'day === openDay',
-    '[class.cal-event-highlight]': '!!day.backgroundColor',
-    '[style.backgroundColor]': 'day.backgroundColor'
+    '[class.cal-event-highlight]': '!!day.backgroundColor'
   }
 })
 export class CalendarMonthCellComponent {

projects/angular-calendar/src/modules/month/calendar-month-view.component.ts

@@ -83,6 +83,7 @@ export interface CalendarMonthViewEventTimesChangedEvent<
               [tooltipTemplate]="tooltipTemplate"
               [tooltipDelay]="tooltipDelay"
               [customTemplate]="cellTemplate"
+              [ngStyle]="{ backgroundColor: day.backgroundColor }"
               (mwlClick)="dayClicked.emit({ day: day })"
               (highlightDay)="toggleDayHighlight($event.event, true)"
               (unhighlightDay)="toggleDayHighlight($event.event, false)"

projects/angular-calendar/src/modules/month/calendar-open-day-events.component.ts

@@ -48,7 +48,7 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
         >
           <span
             class="cal-event"
-            [style.backgroundColor]="event.color?.primary"
+            [ngStyle]="{ backgroundColor: event.color?.primary }"
           >
           </span>
           &ngsp;

projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts

@@ -23,8 +23,10 @@ import { PlacementArray } from 'positioning';
     >
       <div
         class="cal-event"
-        [style.backgroundColor]="weekEvent.event.color?.secondary"
-        [style.borderColor]="weekEvent.event.color?.primary"
+        [ngStyle]="{
+          backgroundColor: weekEvent.event.color?.secondary,
+          borderColor: weekEvent.event.color?.primary
+        }"
         [mwlCalendarTooltip]="
           !tooltipDisabled
             ? (weekEvent.event.title

projects/angular-calendar/test/calendar-day-view.component.spec.ts

@@ -1553,4 +1553,45 @@ describe('CalendarDayViewComponent component', () => {
         .toDate()
     });
   });
+
+  it('should allow css variables for colors', () => {
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerText = `
+    :root {
+        --white: #fff;
+        --black: #000;
+      }
+    `;
+    document.head.appendChild(style);
+    const fixture: ComponentFixture<
+      CalendarDayViewComponent
+    > = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.ngOnInit();
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.events = [
+      {
+        start: new Date('2016-05-30'),
+        end: new Date('2016-06-02'),
+        title: 'foo',
+        color: {
+          primary: 'var(--white)',
+          secondary: 'var(--black)'
+        }
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+
+    const computedStyles: CSSStyleDeclaration = window.getComputedStyle(
+      fixture.nativeElement.querySelector('.cal-event')
+    );
+    expect(computedStyles.getPropertyValue('background-color')).to.equal(
+      'rgb(0, 0, 0)'
+    );
+    expect(computedStyles.getPropertyValue('border-color')).to.equal(
+      'rgb(255, 255, 255)'
+    );
+    document.head.appendChild(style);
+  });
 });

projects/angular-calendar/test/calendar-month-view.component.spec.ts

@@ -974,4 +974,42 @@ describe('calendarMonthView component', () => {
     ).to.equal(true);
     fixture.destroy();
   });
+
+  it('should allow CSS variables for colors', () => {
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerText = `
+    :root {
+        --white: #fff;
+        --black: #000;
+      }
+    `;
+    document.head.appendChild(style);
+    const fixture: ComponentFixture<
+      CalendarMonthViewComponent
+    > = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.ngOnInit();
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.events = [
+      {
+        start: new Date('2016-05-30'),
+        end: new Date('2016-06-02'),
+        title: 'foo',
+        color: {
+          primary: 'var(--white)',
+          secondary: 'var(--black)'
+        }
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+
+    const computedStyles: CSSStyleDeclaration = window.getComputedStyle(
+      fixture.nativeElement.querySelector('.cal-event')
+    );
+    expect(computedStyles.getPropertyValue('background-color')).to.equal(
+      'rgb(255, 255, 255)'
+    );
+    document.head.removeChild(style);
+  });
 });

projects/angular-calendar/test/calendar-week-view.component.spec.ts

@@ -2257,4 +2257,45 @@ describe('calendarWeekView component', () => {
         .toDate()
     });
   });
+
+  it('should allow css variables for colors', () => {
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerText = `
+    :root {
+        --white: #fff;
+        --black: #000;
+      }
+    `;
+    document.head.appendChild(style);
+    const fixture: ComponentFixture<
+      CalendarWeekViewComponent
+    > = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.ngOnInit();
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.events = [
+      {
+        start: new Date('2016-05-30'),
+        end: new Date('2016-06-02'),
+        title: 'foo',
+        color: {
+          primary: 'var(--white)',
+          secondary: 'var(--black)'
+        }
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+
+    const computedStyles: CSSStyleDeclaration = window.getComputedStyle(
+      fixture.nativeElement.querySelector('.cal-event')
+    );
+    expect(computedStyles.getPropertyValue('background-color')).to.equal(
+      'rgb(0, 0, 0)'
+    );
+    expect(computedStyles.getPropertyValue('border-color')).to.equal(
+      'rgb(255, 255, 255)'
+    );
+    document.head.appendChild(style);
+  });
 });