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

Author: Matt Lewis

src/components/month/calendarMonthView.component.ts

@@ -8,7 +8,8 @@ import {
   OnInit,
   OnDestroy,
   LOCALE_ID,
-  Inject
+  Inject,
+  TemplateRef
 } from '@angular/core';
 import {
   CalendarEvent,
@@ -47,7 +48,8 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
     <div class="cal-month-view">
       <mwl-calendar-month-view-header
         [days]="columnHeaders"
-        [locale]="locale">
+        [locale]="locale"
+        [customTemplate]="headerTemplate">
       </mwl-calendar-month-view-header>
       <div class="cal-days">
         <div *ngFor="let rowIndex of view.rowOffsets">
@@ -127,6 +129,11 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   @Input() weekStartsOn: number;
 
+  /**
+   * A custom template to use to replace the header
+   */
+  @Input() headerTemplate: TemplateRef<any>;
+
   /**
    * Called when the day cell is clicked
    */

src/components/month/calendarMonthViewHeader.component.ts

@@ -1,20 +1,26 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, TemplateRef } from '@angular/core';
 import { WeekDay } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-month-view-header',
-  template: `  
-    <div class="cal-cell-row cal-header">
-      <div
-        class="cal-cell"
-        *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">
-        {{ day.date | calendarDate:'monthViewColumnHeader':locale }}
+  template: `
+    <template #defaultTemplate>
+      <div class="cal-cell-row cal-header">
+        <div
+          class="cal-cell"
+          *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">
+          {{ day.date | calendarDate:'monthViewColumnHeader':locale }}
+        </div>
       </div>
-    </div>
+    </template>
+    <template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngOutletContext]="{days: days, locale: locale}">
+    </template>
   `
 })
 export class CalendarMonthViewHeaderComponent {
@@ -23,4 +29,6 @@ export class CalendarMonthViewHeaderComponent {
 
   @Input() locale: string;
 
+  @Input() customTemplate: TemplateRef<any>;
+
 }