chore: updates regarding review

use correct color scheme for views
use blue scheme from existing demos
apply fallback color if none specified when toggling daylight
remove default.scss
apply currentColor to links within cal-event-title

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'
     }
   ];
 

src/angular-calendar.scss

@@ -2,4 +2,3 @@
 @import './modules/week/calendar-week-view';
 @import './modules/day/calendar-day-view';
 @import './modules/common/calendar-tooltip';
-@import './defaults';

src/defaults.scss

@@ -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

@@ -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,9 @@
     border-radius: 50%;
     display: inline-block;
     margin: 2px;
+    background-color: #1e90ff;
+    border-color: #D1E8FF;
+    color: #fff;
   }
 
   .cal-day-cell.cal-in-month.cal-has-events {
@@ -136,10 +139,6 @@
     top: 2px;
   }
 
-  .cal-event-title {
-    color: white;
-  }
-
   .cal-out-month {
     .cal-day-badge,
     .cal-event {

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

@@ -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

@@ -112,13 +112,13 @@ describe('calendarWeekView component', () => {
       fixture.nativeElement.querySelector('.cal-event')
     );
     expect(computedStyles.getPropertyValue('background-color')).to.equal(
-      'rgb(0, 98, 204)'
+      'rgb(209, 232, 255)'
     );
     expect(computedStyles.getPropertyValue('border-color')).to.equal(
-      'rgb(0, 92, 191)'
+      'rgb(30, 144, 255)'
     );
     expect(computedStyles.getPropertyValue('color')).to.equal(
-      'rgb(255, 255, 255)'
+      'rgb(30, 144, 255)'
     );
     fixture.destroy();
   });