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

Closes #178

Author: Matt Lewis

src/calendar.module.ts

@@ -14,6 +14,7 @@ import { CalendarWeekViewHeaderComponent } from './components/week/calendarWeekV
 import { CalendarWeekViewEventComponent } from './components/week/calendarWeekViewEvent.component';
 import { CalendarAllDayEventComponent } from './components/day/calendarAllDayEvent.component';
 import { CalendarDayViewHourSegmentComponent } from './components/day/calendarDayViewHourSegment.component';
+import { CalendarDayViewEventComponent } from './components/day/calendarDayViewEvent.component';
 import { CalendarTooltipWindowComponent, CalendarTooltipDirective } from './directives/calendarTooltip.directive';
 import { CalendarPreviousViewDirective } from './directives/calendarPreviousView.directive';
 import { CalendarNextViewDirective } from './directives/calendarNextView.directive';
@@ -58,7 +59,8 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
     CalendarTodayDirective,
     CalendarDatePipe,
     CalendarEventTitlePipe,
-    CalendarMonthViewHeaderComponent
+    CalendarMonthViewHeaderComponent,
+    CalendarDayViewEventComponent
   ],
   imports: [
     CommonModule,
@@ -84,7 +86,8 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
     CalendarTodayDirective,
     CalendarDatePipe,
     CalendarEventTitlePipe,
-    CalendarMonthViewHeaderComponent
+    CalendarMonthViewHeaderComponent,
+    CalendarDayViewEventComponent
   ],
   entryComponents: [
     CalendarTooltipWindowComponent

src/components/day/calendarDayView.component.ts

@@ -75,24 +75,12 @@ const SEGMENT_HEIGHT: number = 30;
             (dragEnd)="eventDragged(dayEvent, $event.y)"
             [style.marginTop.px]="dayEvent.top"
             [style.height.px]="dayEvent.height">
-            <div
-              class="cal-event"
-              [style.marginLeft.px]="dayEvent.left + 70"
-              [style.width.px]="dayEvent.width - 1"
-              [style.backgroundColor]="dayEvent.event.color.secondary"
-              [style.borderColor]="dayEvent.event.color.primary"
-              [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
-              [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
-              [ngClass]="dayEvent.event.cssClass"
-              [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
-              [tooltipPlacement]="tooltipPlacement">
-              <mwl-calendar-event-title
-                [event]="dayEvent.event"
-                view="day"
-                (click)="eventClicked.emit({event: dayEvent.event})">
-              </mwl-calendar-event-title>
-              <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
-            </div>
+            <mwl-calendar-day-view-event
+              [dayEvent]="dayEvent"
+              [tooltipPlacement]="tooltipPlacement"
+              [customTemplate]="eventTemplate"
+              (eventClicked)="eventClicked.emit({event: dayEvent.event})">
+            </mwl-calendar-day-view-event>
           </div>
         </div>
         <div class="cal-hour" *ngFor="let hour of hours" [style.minWidth.px]="view?.width + 70">
@@ -191,6 +179,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() allDayEventTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for day view events
+   */
+  @Input() eventTemplate: TemplateRef<any>;
+
   /**
    * Called when an event title is clicked
    */

src/components/day/calendarDayViewEvent.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { DayViewEvent } from 'calendar-utils';
+
+@Component({
+  selector: 'mwl-calendar-day-view-event',
+  template: `
+    <ng-template #defaultTemplate>
+      <div
+        class="cal-event"
+        [style.marginLeft.px]="dayEvent.left + 70"
+        [style.width.px]="dayEvent.width - 1"
+        [style.backgroundColor]="dayEvent.event.color.secondary"
+        [style.borderColor]="dayEvent.event.color.primary"
+        [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
+        [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
+        [ngClass]="dayEvent.event.cssClass"
+        [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
+        [tooltipPlacement]="tooltipPlacement">
+        <mwl-calendar-event-title
+          [event]="dayEvent.event"
+          view="day"
+          (click)="eventClicked.emit()">
+        </mwl-calendar-event-title>
+        <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
+      </div>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{dayEvent: dayEvent, tooltipPlacement: tooltipPlacement, eventClicked: eventClicked}">
+    </ng-template>
+  `
+})
+export class CalendarDayViewEventComponent {
+
+  @Input() dayEvent: DayViewEvent;
+
+  @Input() tooltipPlacement: string;
+
+  @Input() customTemplate: TemplateRef<any>;
+
+  @Output() eventClicked: EventEmitter<any> = new EventEmitter();
+
+}