feat: make event colors optional

Closes #468

Author: etwillbefine

demos/demo-modules/exclude-days/component.ts

@@ -28,8 +28,7 @@ export class DemoComponent {
     {
       start: new Date('2016-01-01'),
       end: new Date('2016-01-09'),
-      title: 'Multiple weeks event',
-      color: colors.blue
+      title: 'Multiple weeks event'
     }
   ];
 

package-lock.json

@@ -183,7 +183,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^2.0.0",
     "angular-resizable-element": "^2.0.0",
-    "calendar-utils": "^0.1.1",
+    "calendar-utils": "^0.1.2",
     "date-fns": "^1.28.5",
     "positioning": "^1.3.1"
   }

package.json

@@ -16,8 +16,8 @@ import { CalendarEvent } from 'calendar-utils';
       let-eventClicked="eventClicked">
       <div
         class="cal-all-day-event"
-        [style.backgroundColor]="event.color.secondary"
-        [style.borderColor]="event.color.primary">
+        [style.backgroundColor]="event.color?.secondary"
+        [style.borderColor]="event.color?.primary">
         <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
         <mwl-calendar-event-title
           [event]="event"

src/modules/day/calendar-all-day-event.component.ts

@@ -19,8 +19,8 @@ import { DayViewEvent } from 'calendar-utils';
       let-tooltipAppendToBody="tooltipAppendToBody">
       <div
         class="cal-event"
-        [style.backgroundColor]="dayEvent.event.color.secondary"
-        [style.borderColor]="dayEvent.event.color.primary"
+        [style.backgroundColor]="dayEvent.event.color?.secondary"
+        [style.borderColor]="dayEvent.event.color?.primary"
         [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
         [tooltipPlacement]="tooltipPlacement"
         [tooltipEvent]="dayEvent.event"

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

@@ -48,14 +48,20 @@
   }
 
   .cal-event {
-    border: solid 1px;
     padding: 5px;
     font-size: 12px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     height: 100%;
     box-sizing: border-box;
+    background-color: #D1E8FF;
+    border: 1px solid #1e90ff;
+    color: #1e90ff;
+  }
+
+  .cal-event-title:link {
+    color: currentColor;
   }
 
   .cal-draggable {

src/modules/day/calendar-day-view.scss

@@ -30,7 +30,7 @@ import { trackByEventId } from '../common/util';
         <div
           class="cal-event"
           *ngFor="let event of day.events; trackBy:trackByEventId"
-          [style.backgroundColor]="event.color.primary"
+          [style.backgroundColor]="event.color?.primary"
           [ngClass]="event?.cssClass"
           (mouseenter)="highlightDay.emit({event: event})"
           (mouseleave)="unhighlightDay.emit({event: event})"

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

@@ -312,7 +312,8 @@ export class CalendarMonthViewComponent
   toggleDayHighlight(event: CalendarEvent, isHighlighted: boolean): void {
     this.view.days.forEach(day => {
       if (isHighlighted && day.events.indexOf(event) > -1) {
-        day.backgroundColor = event.color.secondary;
+        day.backgroundColor =
+          (event.color && event.color.secondary) || '#D1E8FF';
       } else {
         delete day.backgroundColor;
       }

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

@@ -97,6 +97,13 @@
     border-radius: 50%;
     display: inline-block;
     margin: 2px;
+    background-color: #1e90ff;
+    border-color: #D1E8FF;
+    color: #fff;
+  }
+
+  .cal-event-title:link {
+    color: currentColor;
   }
 
   .cal-day-cell.cal-in-month.cal-has-events {
@@ -136,10 +143,6 @@
     top: 2px;
   }
 
-  .cal-event-title {
-    color: white;
-  }
-
   .cal-out-month {
     .cal-day-badge,
     .cal-event {

src/modules/month/calendar-month-view.scss

@@ -24,7 +24,7 @@ import { trackByEventId } from '../common/util';
         [dragAxis]="{x: event.draggable, y: event.draggable}">
         <span
           class="cal-event"
-          [style.backgroundColor]="event.color.primary">
+          [style.backgroundColor]="event.color?.primary">
         </span>
         <mwl-calendar-event-title
           [event]="event"

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

@@ -19,7 +19,8 @@ import { WeekViewEvent } from 'calendar-utils';
       let-tooltipAppendToBody="tooltipAppendToBody">
       <div
         class="cal-event"
-        [style.backgroundColor]="weekEvent.event.color.secondary"
+        [style.backgroundColor]="weekEvent.event.color?.secondary"
+        [style.borderColor]="weekEvent.event.color?.primary"
         [mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:'weekTooltip':weekEvent.event"
         [tooltipPlacement]="tooltipPlacement"
         [tooltipEvent]="weekEvent.event"

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

@@ -44,6 +44,13 @@
     margin-right: 2px;
     height: 30px;
     line-height: 30px;
+    background-color: #D1E8FF;
+    border: 1px solid #1e90ff;
+    color: #1e90ff;
+  }
+
+  .cal-event-title:link {
+    color: currentColor;
   }
 
   .cal-draggable {

src/modules/week/calendar-week-view.scss

@@ -72,6 +72,37 @@ describe('CalendarDayViewComponent component', () => {
     expect(fixture.componentInstance.hours.length).to.equal(24);
   });
 
+  it('should generate the week view with default colors for events', () => {
+    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'
+      }
+    ];
+    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(209, 232, 255)'
+    );
+    expect(computedStyles.getPropertyValue('border-color')).to.equal(
+      'rgb(30, 144, 255)'
+    );
+    expect(computedStyles.getPropertyValue('color')).to.equal(
+      'rgb(30, 144, 255)'
+    );
+    fixture.destroy();
+  });
+
   it(
     'should call the event clicked callback',
     async(() => {

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

@@ -71,6 +71,37 @@ describe('calendarMonthView component', () => {
     fixture.destroy();
   });
 
+  it('should generate the week view with default colors for events', () => {
+    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'
+      }
+    ];
+    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(30, 144, 255)'
+    );
+    expect(computedStyles.getPropertyValue('border-color')).to.equal(
+      'rgb(209, 232, 255)'
+    );
+    expect(computedStyles.getPropertyValue('color')).to.equal(
+      'rgb(255, 255, 255)'
+    );
+    fixture.destroy();
+  });
+
   it('should generate the month view without from week excluded days', () => {
     const fixture: ComponentFixture<
       CalendarMonthViewComponent

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

@@ -92,6 +92,37 @@ describe('calendarWeekView component', () => {
     fixture.destroy();
   });
 
+  it('should generate the week view with default colors for events', () => {
+    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'
+      }
+    ];
+    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(209, 232, 255)'
+    );
+    expect(computedStyles.getPropertyValue('border-color')).to.equal(
+      'rgb(30, 144, 255)'
+    );
+    expect(computedStyles.getPropertyValue('color')).to.equal(
+      'rgb(30, 144, 255)'
+    );
+    fixture.destroy();
+  });
+
   it('should emit on the dayHeaderClicked output', () => {
     const fixture: ComponentFixture<
       CalendarWeekViewComponent