feat(weekView): allow a custom css class to be added to a column header

Closes #222

Author: Matt Lewis

src/components/week/calendarWeekView.component.ts

@@ -165,6 +165,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Output() eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent> = new EventEmitter<CalendarEventTimesChangedEvent>();
 
+  /**
+   * An output that will be called before the view is rendered for the current week.
+   * If you add the `cssClass` property to a day in the header it will add that class to the cell element in the template
+   */
+  @Output() beforeViewRender: EventEmitter<{header: WeekDay[]}> = new EventEmitter();
+
   /**
    * @hidden
    */
@@ -339,6 +345,9 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       excluded: this.excludeDays,
       weekendDays: this.weekendDays
     });
+    this.beforeViewRender.emit({
+      header: this.days
+    });
   }
 
   private refreshBody(): void {

src/components/week/calendarWeekViewHeader.component.ts

@@ -14,6 +14,7 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
           [class.cal-future]="day.isFuture"
           [class.cal-weekend]="day.isWeekend"
           [class.cal-drag-over]="day.dragOver"
+          [ngClass]="day.cssClass"
           (mwlClick)="dayClicked.emit({date: day.date})"
           mwlDroppable
           (dragEnter)="day.dragOver = true"

test/calendarWeekView.component.spec.ts

@@ -547,4 +547,16 @@ describe('calendarWeekView component', () => {
     fixture.destroy();
   });
 
+  it('should add a custom CSS class to headers via the beforeViewRender output', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    fixture.componentInstance.beforeViewRender.take(1).subscribe(({header}) => {
+      header[0].cssClass = 'foo';
+    });
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.cal-header').classList.contains('foo')).to.equal(true);
+    fixture.destroy();
+  });
+
 });