feat(weekView): allow the header template to be customised

Author: Matt Lewis

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
    */

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}>();