How to open context menu on the left click of the mouse in the Angular Scheduler?
This knowledge base explains you about how to open the context menu on the left click of the mouse in the Schedule.
Step by step guide
Follow the below steps to achieve the functionality “Show context-menu at left-click of mouse”.
Step 1: Create an Angular Scheduler by referring the following user guide link.
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#getting-started
Step 2: Add the Angular Schedule component with cellClick and eventClick events as shown in the following code.
[app.component.html]
<ejs-schedule #scheduleObj height='650px' [selectedDate]="selectedDate" [allowResizing]="allowResizing" [allowDragAndDrop]="allowDragDrop" [eventSettings]="eventSettings" (cellClick)='onCellClick($event)' (eventClick)='onEventClick($event)'> </ejs-schedule>
Step 3: Add the Context menu component with beforeOpen and select events as shown in the following code.
[app.component.html]
<ejs-contextmenu #menuObj cssClass='schedule-context-menu' target='.e-schedule' [items]='menuItems' (beforeOpen)='onContextMenuBeforeOpen($event)' (select)='onMenuItemSelect($event)'> </ejs-contextmenu>
Step 4: Add the context menu items to the variable called menuItems as shown in the following code.
[app.component.ts]
public menuItems: MenuItemModel[] = [
{
text: 'New Event',
iconCss: 'e-icons new',
id: 'Add'
}, {
text: 'New Recurring Event',
iconCss: 'e-icons recurrence',
id: 'AddRecurrence'
}, {
text: 'Today',
iconCss: 'e-icons today',
id: 'Today'
}, {
text: 'Edit Event',
iconCss: 'e-icons edit',
id: 'Save'
}, {
text: 'Edit Event',
id: 'EditRecurrenceEvent',
iconCss: 'e-icons edit',
items: [{
text: 'Edit Occurrence',
id: 'EditOccurrence'
}, {
text: 'Edit Series',
id: 'EditSeries'
}]
}, {
text: 'Delete Event',
iconCss: 'e-icons delete',
id: 'Delete'
}, {
text: 'Delete Event',
id: 'DeleteRecurrenceEvent',
iconCss: 'e-icons delete',
items: [{
text: 'Delete Occurrence',
id: 'DeleteOccurrence'
}, {
text: 'Delete Series',
id: 'DeleteSeries'
}]
}
];
Step 5: Add the onContextMenuBeforeOpen method to bind with the beforeOpen event of the Context menu as shown in the following code.
[app.component.ts]
onContextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
if (args.event && ((args.event as any).which === 3)) {
args.cancel = true;
} else {
let newEventElement: HTMLElement = document.querySelector('.e-new-event') as HTMLElement;
if (newEventElement) {
remove(newEventElement);
removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');
}
let targetElement: HTMLElement;
if (args.name === 'beforeOpen') {
targetElement = this.cellTarget || this.eventTarget;
if (isNullOrUndefined(targetElement)) return;
} else {
targetElement = <HTMLElement>args.event.target;
}
if (closest(targetElement, '.e-contextmenu')) {
return;
}
this.selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,' +
'.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
if (isNullOrUndefined(this.selectedTarget)) {
args.cancel = true;
return;
}
if (this.selectedTarget.classList.contains('e-appointment')) {
let eventObj: { [key: string]: Object } = <{ [key: string]: Object }>this.scheduleObj.getEventDetails(this.selectedTarget);
if (eventObj.RecurrenceRule) {
this.menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
this.menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);
} else {
this.menuObj.showItems(['Save', 'Delete'], true);
this.menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
}
return;
}
this.menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
this.menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);
}
}
Step 6: Add the onMenuItemSelect method that binds with the select event of the Context menu as shown in the following code.
[app.component.ts]
onMenuItemSelect(args: MenuEventArgs): void {
let selectedMenuItem: string = args.item.id;
let eventObj: { [key: string]: Object };
if (this.selectedTarget.classList.contains('e-appointment')) {
eventObj = <{ [key: string]: Object }>this.scheduleObj.getEventDetails(this.selectedTarget);
}
switch (selectedMenuItem) {
case 'Today':
this.scheduleObj.selectedDate = new Date();
break;
case 'Add':
case 'AddRecurrence':
let selectedCells: Element[] = this.scheduleObj.getSelectedElements();
let activeCellsData: CellClickEventArgs =
this.scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : this.selectedTarget);
if (selectedMenuItem === 'Add') {
this.scheduleObj.openEditor(activeCellsData, 'Add');
} else {
this.scheduleObj.openEditor(activeCellsData, 'Add', null, 1);
}
break;
case 'Save':
case 'EditOccurrence':
case 'EditSeries':
if (selectedMenuItem === 'EditSeries') {
eventObj = <{ [key: string]: Object }>new DataManager(this.scheduleObj.eventsData).executeLocal(new Query().
where(this.scheduleObj.eventFields.id, 'equal', eventObj[this.scheduleObj.eventFields.recurrenceID] as string | number))[0];
}
this.scheduleObj.openEditor(eventObj, selectedMenuItem);
break;
case 'Delete':
this.scheduleObj.deleteEvent(eventObj);
break;
case 'DeleteOccurrence':
case 'DeleteSeries':
this.scheduleObj.deleteEvent(eventObj, selectedMenuItem);
break;
}
}
Step 7: Add the onCellClick method that binds with the cellClick event of the Schedule as shown in the following code.
[app.component.ts]
onCellClick(args: CellClickEventArgs) {
let arg: any = args;
let top = +arg.event.clientY;
let left = +arg.event.clientX;
this.cellTarget = args.event.target;
this.menuObj.open(top, left);
this.cellTarget = null;
args.cancel = true;
}
Step 8: Add the onEventClick method that binds with the eventClick event of the Schedule as shown in the following code.
[app.component.ts]
onEventClick(args: EventClickArgs) {
let arg: any = args;
let top = +arg.originalEvent.clientY;
let left = +arg.originalEvent.clientX;
this.eventTarget = (args as any).originalEvent.target;
this.menuObj.open(top, left);
this.eventTarget = null;
args.cancel = true;
}
Step 9: Run the sample and open the context menu on mouse left click.
Sample: You can refer to this GitHub sample for this functionality.
