feat(eventTitleTemplate): allow the event title template to be customised

Closes #312

Author: Matt Lewis

src/components/common/calendarEventTitle.component.ts

@@ -1,18 +1,32 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, TemplateRef } from '@angular/core';
 import { CalendarEvent } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-event-title',
   template: `
-    <a
-      class="cal-event-title"
-      href="javascript:;"
-      [innerHTML]="event.title | calendarEventTitle:view:event">
-    </a>
+    <ng-template
+      #defaultTemplate
+      let-event="event"
+      let-view="view">
+      <a
+        class="cal-event-title"
+        href="javascript:;"
+        [innerHTML]="event.title | calendarEventTitle:view:event">
+      </a>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{
+        event: event,
+        view: view
+      }">
+    </ng-template>
   `
 })
 export class CalendarEventTitleComponent {
   @Input() event: CalendarEvent;
 
+  @Input() customTemplate: TemplateRef<any>;
+
   @Input() view: string;
 }

src/components/day/calendarAllDayEvent.component.ts

@@ -21,6 +21,7 @@ import { CalendarEvent } from 'calendar-utils';
         <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
         <mwl-calendar-event-title
           [event]="event"
+          [customTemplate]="eventTitleTemplate"
           view="day"
           (mwlClick)="eventClicked.emit()">
         </mwl-calendar-event-title>
@@ -40,5 +41,7 @@ export class CalendarAllDayEventComponent {
 
   @Input() customTemplate: TemplateRef<any>;
 
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();
 }

src/components/day/calendarDayView.component.ts

@@ -64,6 +64,7 @@ export interface DayViewEventResize {
         *ngFor="let event of view.allDayEvents"
         [event]="event"
         [customTemplate]="allDayEventTemplate"
+        [eventTitleTemplate]="eventTitleTemplate"
         (eventClicked)="eventClicked.emit({event: event})">
       </mwl-calendar-all-day-event>
       <div class="cal-hour-rows">
@@ -99,6 +100,7 @@ export interface DayViewEventResize {
               [tooltipTemplate]="tooltipTemplate"
               [tooltipAppendToBody]="tooltipAppendToBody"
               [customTemplate]="eventTemplate"
+              [eventTitleTemplate]="eventTitleTemplate"
               (eventClicked)="eventClicked.emit({event: dayEvent.event})">
             </mwl-calendar-day-view-event>
           </div>
@@ -208,6 +210,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() eventTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for event titles
+   */
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   /**
    * Called when an event title is clicked
    */

src/components/day/calendarDayViewEvent.component.ts

@@ -29,6 +29,7 @@ import { DayViewEvent } from 'calendar-utils';
         <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
         <mwl-calendar-event-title
           [event]="dayEvent.event"
+          [customTemplate]="eventTitleTemplate"
           view="day"
           (mwlClick)="eventClicked.emit()">
         </mwl-calendar-event-title>
@@ -55,6 +56,8 @@ export class CalendarDayViewEventComponent {
 
   @Input() customTemplate: TemplateRef<any>;
 
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   @Input() tooltipTemplate: TemplateRef<any>;
 
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();

src/components/month/calendarMonthView.component.ts

@@ -78,6 +78,7 @@ import { CalendarUtils } from '../../providers/calendarUtils.provider';
             [isOpen]="openRowIndex === rowIndex"
             [events]="openDay?.events"
             [customTemplate]="openDayEventsTemplate"
+            [eventTitleTemplate]="eventTitleTemplate"
             (eventClicked)="eventClicked.emit({event: $event.event})">
           </mwl-calendar-open-day-events>
         </div>
@@ -153,6 +154,11 @@ export class CalendarMonthViewComponent
    */
   @Input() openDayEventsTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for event titles
+   */
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   /**
    * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends
    */

src/components/month/calendarOpenDayEvents.component.ts

@@ -27,6 +27,7 @@ import { CalendarEvent } from 'calendar-utils';
         </span>
         <mwl-calendar-event-title
           [event]="event"
+          [customTemplate]="eventTitleTemplate"
           view="month"
           (mwlClick)="eventClicked.emit({event: event})">
         </mwl-calendar-event-title>
@@ -63,6 +64,8 @@ export class CalendarOpenDayEventsComponent {
 
   @Input() customTemplate: TemplateRef<any>;
 
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   @Output()
   eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
     event: CalendarEvent;

src/components/week/calendarWeekView.component.ts

@@ -83,6 +83,7 @@ export interface WeekViewEventResize {
             [tooltipTemplate]="tooltipTemplate"
             [tooltipAppendToBody]="tooltipAppendToBody"
             [customTemplate]="eventTemplate"
+            [eventTitleTemplate]="eventTitleTemplate"
             (eventClicked)="eventClicked.emit({event: weekEvent.event})">
           </mwl-calendar-week-view-event>
         </div>
@@ -147,6 +148,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() eventTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for event titles
+   */
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   /**
    * The precision to display events.
    * `days` will round event start and end dates to the nearest day and `minutes` will not do this rounding

src/components/week/calendarWeekViewEvent.component.ts

@@ -28,6 +28,7 @@ import { WeekViewEvent } from 'calendar-utils';
         <mwl-calendar-event-actions [event]="weekEvent.event"></mwl-calendar-event-actions>
         <mwl-calendar-event-title
           [event]="weekEvent.event"
+          [customTemplate]="eventTitleTemplate"
           view="week"
           (mwlClick)="eventClicked.emit()">
         </mwl-calendar-event-title>
@@ -54,6 +55,8 @@ export class CalendarWeekViewEventComponent {
 
   @Input() customTemplate: TemplateRef<any>;
 
+  @Input() eventTitleTemplate: TemplateRef<any>;
+
   @Input() tooltipTemplate: TemplateRef<any>;
 
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();