From 068d08b0e851efec711db4282953914996860c42 Mon Sep 17 00:00:00 2001
From: Matt Lewis <matthew.lewis@socialsignin.co.uk>
Date: Sun, 25 Jun 2017 21:39:21 +0100
Subject: [PATCH] feat(weekView): allow a custom css class to be added to a
 column header

Closes #222
---
 src/components/week/calendarWeekView.component.ts    |  9 +++++++++
 .../week/calendarWeekViewHeader.component.ts         |  1 +
 test/calendarWeekView.component.spec.ts              | 12 ++++++++++++
 3 files changed, 22 insertions(+)

diff --git a/src/components/week/calendarWeekView.component.ts b/src/components/week/calendarWeekView.component.ts
index eebefdbde..407cd8e6c 100644
--- a/src/components/week/calendarWeekView.component.ts
+++ b/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 {
diff --git a/src/components/week/calendarWeekViewHeader.component.ts b/src/components/week/calendarWeekViewHeader.component.ts
index 1a129d6db..7b895ff8f 100644
--- a/src/components/week/calendarWeekViewHeader.component.ts
+++ b/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"
diff --git a/test/calendarWeekView.component.spec.ts b/test/calendarWeekView.component.spec.ts
index fa537f902..e6efaf7e0 100644
--- a/test/calendarWeekView.component.spec.ts
+++ b/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();
+  });
+
 });