feat: allow event actions template to be customised

Closes #673

Author: mattlewis92

src/modules/common/calendar-event-actions.component.ts

@@ -1,24 +1,38 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, TemplateRef } from '@angular/core';
 import { CalendarEvent } from 'calendar-utils';
 import { trackByIndex } from './util';
 
 @Component({
   selector: 'mwl-calendar-event-actions',
   template: `
-    <span *ngIf="event.actions" class="cal-event-actions">
-      <a
-        class="cal-event-action"
-        href="javascript:;"
-        *ngFor="let action of event.actions; trackBy:trackByIndex"
-        (mwlClick)="action.onClick({event: event})"
-        [ngClass]="action.cssClass"
-        [innerHtml]="action.label">
-      </a>
-    </span>
+    <ng-template
+      #defaultTemplate
+      let-event="event">
+      <span *ngIf="event.actions" class="cal-event-actions">
+        <a
+          class="cal-event-action"
+          href="javascript:;"
+          *ngFor="let action of event.actions; trackBy:trackByIndex"
+          (mwlClick)="action.onClick({event: event})"
+          [ngClass]="action.cssClass"
+          [innerHtml]="action.label">
+        </a>
+      </span>
+    </ng-template>
+    <ng-template
+      [ngTemplateOutlet]="customTemplate || defaultTemplate"
+      [ngTemplateOutletContext]="{
+        event: event
+      }">
+    </ng-template>
   `
 })
 export class CalendarEventActionsComponent {
   @Input()
   event: CalendarEvent;
+
+  @Input()
+  customTemplate: TemplateRef<any>;
+
   trackByIndex = trackByIndex;
 }

src/modules/day/calendar-all-day-event.component.ts

@@ -19,7 +19,10 @@ import { CalendarEvent } from 'calendar-utils';
         [style.backgroundColor]="event.color?.secondary"
         [style.borderColor]="event.color?.primary"
         (mwlClick)="eventClicked.emit()">
-        <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
+        <mwl-calendar-event-actions
+          [event]="event"
+          [customTemplate]="eventActionsTemplate">
+        </mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
           [event]="event"
@@ -47,6 +50,9 @@ export class CalendarAllDayEventComponent {
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  @Input()
+  eventActionsTemplate: TemplateRef<any>;
+
   @Output()
   eventClicked: EventEmitter<any> = new EventEmitter();
 }

src/modules/day/calendar-day-view-event.component.ts

@@ -28,7 +28,10 @@ import { PlacementArray } from 'positioning';
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
         (mwlClick)="eventClicked.emit()">
-        <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
+        <mwl-calendar-event-actions
+          [event]="dayEvent.event"
+          [customTemplate]="eventActionsTemplate">
+        </mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
           [event]="dayEvent.event"
@@ -65,6 +68,9 @@ export class CalendarDayViewEventComponent {
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  @Input()
+  eventActionsTemplate: TemplateRef<any>;
+
   @Input()
   tooltipTemplate: TemplateRef<any>;
 

src/modules/day/calendar-day-view.component.ts

@@ -87,6 +87,7 @@ export interface DayViewEventResize {
           [event]="event"
           [customTemplate]="allDayEventTemplate"
           [eventTitleTemplate]="eventTitleTemplate"
+          [eventActionsTemplate]="eventActionsTemplate"
           (eventClicked)="eventClicked.emit({event: event})"
           mwlDraggable
           dragActiveClass="cal-drag-active"
@@ -135,6 +136,7 @@ export interface DayViewEventResize {
               [tooltipAppendToBody]="tooltipAppendToBody"
               [customTemplate]="eventTemplate"
               [eventTitleTemplate]="eventTitleTemplate"
+              [eventActionsTemplate]="eventActionsTemplate"
               (eventClicked)="eventClicked.emit({event: dayEvent.event})">
             </mwl-calendar-day-view-event>
           </div>
@@ -274,6 +276,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for event actions
+   */
+  @Input()
+  eventActionsTemplate: TemplateRef<any>;
+
   /**
    * Whether to snap events to a grid when dragging
    */

src/modules/month/calendar-month-view.component.ts

@@ -87,6 +87,7 @@ export interface CalendarMonthViewEventTimesChangedEvent<
             [events]="openDay?.events"
             [customTemplate]="openDayEventsTemplate"
             [eventTitleTemplate]="eventTitleTemplate"
+            [eventActionsTemplate]="eventActionsTemplate"
             (eventClicked)="eventClicked.emit({event: $event.event})"
             mwlDroppable
             dragOverClass="cal-drag-over"
@@ -184,6 +185,12 @@ export class CalendarMonthViewComponent
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for event actions
+   */
+  @Input()
+  eventActionsTemplate: TemplateRef<any>;
+
   /**
    * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends
    */

src/modules/month/calendar-open-day-events.component.ts

@@ -55,7 +55,10 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
             (mwlClick)="eventClicked.emit({event: event})">
           </mwl-calendar-event-title>
           &ngsp;
-          <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
+          <mwl-calendar-event-actions
+            [event]="event"
+            [customTemplate]="eventActionsTemplate">
+          </mwl-calendar-event-actions>
         </div>
       </div>
     </ng-template>
@@ -83,6 +86,9 @@ export class CalendarOpenDayEventsComponent {
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  @Input()
+  eventActionsTemplate: TemplateRef<any>;
+
   @Output()
   eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
     event: CalendarEvent;

src/modules/week/calendar-week-view-event.component.ts

@@ -29,7 +29,10 @@ import { PlacementArray } from 'positioning';
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
         (mwlClick)="eventClicked.emit()">
-        <mwl-calendar-event-actions [event]="weekEvent.event"></mwl-calendar-event-actions>
+        <mwl-calendar-event-actions
+          [event]="weekEvent.event"
+          [customTemplate]="eventActionsTemplate">
+        </mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
           [event]="weekEvent.event"
@@ -70,6 +73,9 @@ export class CalendarWeekViewEventComponent {
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  @Input()
+  eventActionsTemplate: TemplateRef<any>;
+
   @Input()
   tooltipTemplate: TemplateRef<any>;
 

src/modules/week/calendar-week-view.component.ts

@@ -147,6 +147,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               [tooltipAppendToBody]="tooltipAppendToBody"
               [customTemplate]="eventTemplate"
               [eventTitleTemplate]="eventTitleTemplate"
+              [eventActionsTemplate]="eventActionsTemplate"
               (eventClicked)="eventClicked.emit({event: allDayEvent.event})">
             </mwl-calendar-week-view-event>
           </div>
@@ -230,6 +231,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
                 [tooltipDisabled]="dragActive || timeEventResizes.size > 0"
                 [customTemplate]="eventTemplate"
                 [eventTitleTemplate]="eventTitleTemplate"
+                [eventActionsTemplate]="eventActionsTemplate"
                 (eventClicked)="eventClicked.emit({event: timeEvent.event})">
               </mwl-calendar-week-view-event>
               <div
@@ -341,6 +343,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   @Input()
   eventTitleTemplate: TemplateRef<any>;
 
+  /**
+   * A custom template to use for event actions
+   */
+  @Input()
+  eventActionsTemplate: 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