[event actions]: Allow custom template to be provided

[vgebrev]

Is your feature request related to a problem? Please describe

I wanted to display the event actions as a menu rather than a list of links. In order to do this, I had to create my own calendar-event-actions-menu component and then use custom templates for the month/week/day view components where I replaced references to mwl-calendar-event-actions with my custom component.

Describe the solution you'd like

It might be easier if mwl-calendar-event-actions could take a custom template instead.

Describe your use case for implementing this feature

Easier customisation of the display of event actions, eg as a menu instead of a list of links

Additional context

Is there a way to simply override the mwl-calendar-event-actions component? I was getting an error about the same selector referencing multiple components and I didn't really follow that trail, opting for the workaround above.

Some code:

calendar-event-actions-menu.component.ts

export const trackByIndex = (index: number) => index;

@Component({
  selector: 'calendar-event-actions-menu',
  template: `
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item
      *ngFor="let action of event.actions; trackBy:trackByIndex" 
      (mwlClick)="action.onClick({event: event})">
      <mat-icon>{{action.icon}}</mat-icon>
      <span [innerHtml]="action.label"></span>
    </button>
  </mat-menu>
  `
})
export class CalendarEventActionsMenuComponent {
  @Input() event: CalendarEvent;
  trackByIndex = trackByIndex;
}

open-day-events.template.html

  <ng-template
    #openDayEventsTemplate
    let-events="events"
    let-eventClicked="eventClicked"
    let-isOpen="isOpen">
    <div class="cal-open-day-events" [@collapse] *ngIf="isOpen">
      <div
        *ngFor="let event of events; trackBy:trackByEventId"
        [ngClass]="event?.cssClass"
        mwlDraggable
        [class.cal-draggable]="event.draggable"
        dragActiveClass="cal-drag-active"
        [dropData]="{event: event}"
        [dragAxis]="{x: event.draggable, y: event.draggable}">
        <span
          class="cal-event"
          [style.backgroundColor]="event.color?.primary">
        </span>
        &ngsp;
        <mwl-calendar-event-title
          [event]="event"
          [customTemplate]="eventTitleTemplate"
          view="month"
          (mwlClick)="eventClicked.emit({event: event})">
        </mwl-calendar-event-title>
        &ngsp;
        <calendar-event-actions-menu [event]="event"></calendar-event-actions-menu>
      </div>
    </div>
  </ng-template>

Would be easier if I could do something like:

<ng-template
  #eventActionsTemplate
  let-actions="actions">
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item
      *ngFor="let action of event.actions; trackBy:trackByIndex" 
      (mwlClick)="action.onClick({event: event})">
      <mat-icon>{{action.icon}}</mat-icon>
      <span [innerHtml]="action.label"></span>
    </button>
  </mat-menu>
</ng-template>

<mwl-calendar-month-view
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="events"
    [eventActionsTemplate]="eventActionsTemplate"
</mwl-calendar-month-view>

[mattlewis92]

I'm surprised this is the first time it's come up, it's definitely a gap in the API, I've added it now in the latest beta, install instructions and how to migrate are here: #589 Let me know if that works ok for you 😄