From 595a6678cdaed8da2015f28d59719e11e0918b7e Mon Sep 17 00:00:00 2001
From: Matt Lewis <matthew.lewis@socialsignin.co.uk>
Date: Tue, 21 Mar 2017 15:17:07 +0000
Subject: [PATCH] feat(weekView): allow the header template to be customised

---
 .../week/calendarWeekView.component.ts        |  9 +++-
 .../week/calendarWeekViewHeader.component.ts  | 46 +++++++++++--------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/week/calendarWeekView.component.ts b/src/components/week/calendarWeekView.component.ts
index 3ce71e8db..eb50895c1 100644
--- a/src/components/week/calendarWeekView.component.ts
+++ b/src/components/week/calendarWeekView.component.ts
@@ -8,7 +8,8 @@ import {
   OnInit,
   OnDestroy,
   LOCALE_ID,
-  Inject
+  Inject,
+  TemplateRef
 } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
@@ -43,6 +44,7 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
       <mwl-calendar-week-view-header
         [days]="days"
         [locale]="locale"
+        [customTemplate]="headerTemplate"
         (dayClicked)="dayClicked.emit($event)"
         (eventDropped)="eventTimesChanged.emit($event)">
       </mwl-calendar-week-view-header>
@@ -114,6 +116,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() weekStartsOn: number;
 
+  /**
+   * A custom template to use to replace the header
+   */
+  @Input() headerTemplate: TemplateRef<any>;
+
   /**
    * Called when a header week day is clicked
    */
diff --git a/src/components/week/calendarWeekViewHeader.component.ts b/src/components/week/calendarWeekViewHeader.component.ts
index 4e211b6fe..b790df958 100644
--- a/src/components/week/calendarWeekViewHeader.component.ts
+++ b/src/components/week/calendarWeekViewHeader.component.ts
@@ -1,27 +1,33 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
 import { CalendarEvent, WeekDay } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-week-view-header',
-  template: `  
-    <div class="cal-day-headers">
-      <div
-        class="cal-header"
-        *ngFor="let day of days"
-        [class.cal-past]="day.isPast"
-        [class.cal-today]="day.isToday"
-        [class.cal-future]="day.isFuture"
-        [class.cal-weekend]="day.isWeekend"
-        [class.cal-drag-over]="day.dragOver"
-        (click)="dayClicked.emit({date: day.date})"
-        mwlDroppable
-        (dragEnter)="day.dragOver = true"
-        (dragLeave)="day.dragOver = false"
-        (drop)="day.dragOver = false; eventDropped.emit({event: $event.dropData.event, newStart: day.date})">
-        <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br>
-        <span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
+  template: `
+    <template #defaultTemplate>
+      <div class="cal-day-headers">
+        <div
+          class="cal-header"
+          *ngFor="let day of days"
+          [class.cal-past]="day.isPast"
+          [class.cal-today]="day.isToday"
+          [class.cal-future]="day.isFuture"
+          [class.cal-weekend]="day.isWeekend"
+          [class.cal-drag-over]="day.dragOver"
+          (click)="dayClicked.emit({date: day.date})"
+          mwlDroppable
+          (dragEnter)="day.dragOver = true"
+          (dragLeave)="day.dragOver = false"
+          (drop)="day.dragOver = false; eventDropped.emit({event: $event.dropData.event, newStart: day.date})">
+          <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br>
+          <span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
+        </div>
       </div>
-    </div>
+    </template>
+    <template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngOutletContext]="{days: days, locale: locale, dayClicked: dayClicked, eventDropped: eventDropped}">
+    </template>
   `
 })
 export class CalendarWeekViewHeaderComponent {
@@ -30,6 +36,8 @@ export class CalendarWeekViewHeaderComponent {
 
   @Input() locale: string;
 
+  @Input() customTemplate: TemplateRef<any>;
+
   @Output() dayClicked: EventEmitter<{date: Date}> = new EventEmitter<{date: Date}>();
 
   @Output() eventDropped: EventEmitter<{event: CalendarEvent, newStart: Date}> = new EventEmitter<{event: CalendarEvent, newStart: Date}>();