feat(monthView): allow the cell templates to be customised

Author: Matt Lewis

src/components/month/calendarMonthCell.component.ts

@@ -1,29 +1,43 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
 import { MonthViewDay, CalendarEvent } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-month-cell',
   template: `
-    <div class="cal-cell-top">
-      <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
-      <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
-    </div>
-    <div class="cal-events">
-      <div
-        class="cal-event"
-        *ngFor="let event of day.events"
-        [style.backgroundColor]="event.color.primary"
-        [ngClass]="event?.cssClass"
-        (mouseenter)="highlightDay.emit({event: event})"
-        (mouseleave)="unhighlightDay.emit({event: event})"
-        [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
-        [tooltipPlacement]="tooltipPlacement"
-        mwlDraggable
-        [dropData]="{event: event}"
-        [dragAxis]="{x: event.draggable, y: event.draggable}"
-        (click)="$event.stopPropagation(); eventClicked.emit({event: event})">
+    <template #defaultTemplate>
+      <div class="cal-cell-top">
+        <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
+        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
       </div>
-    </div>
+      <div class="cal-events">
+        <div
+          class="cal-event"
+          *ngFor="let event of day.events"
+          [style.backgroundColor]="event.color.primary"
+          [ngClass]="event?.cssClass"
+          (mouseenter)="highlightDay.emit({event: event})"
+          (mouseleave)="unhighlightDay.emit({event: event})"
+          [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
+          [tooltipPlacement]="tooltipPlacement"
+          mwlDraggable
+          [dropData]="{event: event}"
+          [dragAxis]="{x: event.draggable, y: event.draggable}"
+          (click)="$event.stopPropagation(); eventClicked.emit({event: event})">
+        </div>
+      </div>
+    </template>
+    <template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngOutletContext]="{
+        day: day,
+        openDay: openDay,
+        locale: locale,
+        tooltipPlacement: tooltipPlacement,
+        highlightDay: highlightDay,
+        unhighlightDay: unhighlightDay,
+        eventClicked: eventClicked
+      }">
+    </template>
   `,
   host: {
     '[class]': '"cal-cell cal-day-cell " + day?.cssClass',
@@ -48,6 +62,8 @@ export class CalendarMonthCellComponent {
 
   @Input() tooltipPlacement: string;
 
+  @Input() customTemplate: TemplateRef<any>;
+
   @Output() highlightDay: EventEmitter<any> = new EventEmitter();
 
   @Output() unhighlightDay: EventEmitter<any> = new EventEmitter();

src/components/month/calendarMonthView.component.ts

@@ -61,6 +61,7 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTi
               [openDay]="openDay"
               [locale]="locale"
               [tooltipPlacement]="tooltipPlacement"
+              [customTemplate]="cellTemplate"
               (click)="dayClicked.emit({day: day})"
               (highlightDay)="toggleDayHighlight($event.event, true)"
               (unhighlightDay)="toggleDayHighlight($event.event, false)"
@@ -134,6 +135,11 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
    */
   @Input() headerTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use to replace the day cell
+   */
+  @Input() cellTemplate: TemplateRef<any>;
+
   /**
    * Called when the day cell is clicked
    */