feat(dayView): allow the all day event template to be customised

src/components/day/calendarAllDayEvent.component.ts

@@ -1,26 +1,37 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
 import { CalendarEvent } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-all-day-event',
   template: `
-    <div
-      class="cal-all-day-event"
-      [style.backgroundColor]="event.color.secondary"
-      [style.borderColor]="event.color.primary">
-      <mwl-calendar-event-title
-        [event]="event"
-        view="day"
-        (click)="eventClicked.emit()">
-      </mwl-calendar-event-title>
-      <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
-    </div>
+    <ng-template #defaultTemplate>
+      <div
+        class="cal-all-day-event"
+        [style.backgroundColor]="event.color.secondary"
+        [style.borderColor]="event.color.primary">
+        <mwl-calendar-event-title
+          [event]="event"
+          view="day"
+          (click)="eventClicked.emit()">
+        </mwl-calendar-event-title>
+        <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
+      </div>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{
+        event: event,
+        eventClicked: eventClicked
+      }">
+    </ng-template>
   `
 })
 export class CalendarAllDayEventComponent {
 
   @Input() event: CalendarEvent;
 
+  @Input() customTemplate: TemplateRef<any>;
+
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();
 
 }

src/components/day/calendarDayView.component.ts

@@ -50,6 +50,7 @@ const SEGMENT_HEIGHT: number = 30;
       <mwl-calendar-all-day-event
         *ngFor="let event of view.allDayEvents"
         [event]="event"
+        [customTemplate]="allDayEventTemplate"
         (eventClicked)="eventClicked.emit({event: event})">
       </mwl-calendar-all-day-event>
       <div class="cal-hour-rows">
@@ -182,6 +183,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() hourSegmentTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for all day events
+   */
+  @Input() allDayEventTemplate: TemplateRef<any>;
+
   /**
    * Called when an event title is clicked
    */