Angular calendar: right-click listener doesn't fire

I'm in the process of upgrading an existing implementation of the angular-calendar component by adding a right-click context menu for the calendar events. I have already looked into upgrading it by using an ng-template, but that solution causes to break the layout completely. Hence I am trying the following:

.html:

<mwl-calendar-week-view
[viewDate]="viewDate"
[events]="events"
(eventClicked)="onEventClick($event)"
>
<!-- Add right-click listener on each event div -->
<div *ngFor="let event of events" #calendarEvent (contextmenu)="onCalendarContextMenu($event, event)" class="calendar-event">
<div>{{ event.title }}</div>
</div>
</mwl-calendar-week-view>


page.ts:

// Handle right-click context menu and pass the event data along
onCalendarContextMenu(event: any, clickedEvent: any): void {
console.log(event);
console.log(clickedEvent);
event.preventDefault(); // Prevent the default browser context menu

if (event.button === 2) { // Check if it's a right-click (button 2 is for right-click)
this.menuVisible = true;
this.selectedEvent = clickedEvent; // Set the selected event
this.menuPosition.x = event.clientX;
this.menuPosition.y = event.clientY;
}
}


The listener doesn't fire: for some reason the <div> with the events doesn't appear in the DOM. What is wrong here? Also, I cannot put the listener directly on the <mwl-calendar-week-view> element, because the event property is missing there and I would need access to it.

Continue reading...