How to open context menu on the left click of the mouse in the Angular Scheduler?
This article explains how to open the context menu with 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 to 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, which binds 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.
Conclusion
We hope you enjoyed learning how to open context menu on the left click of the mouse in the Angular Scheduler.
You can refer to our Angular Scheduler's feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular Scheduler example to understand how to present and manipulate data.
For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Scheduler and other Angular components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
