How to show/hide the context menu items on specific appointments of Scheduler?

This knowledge base article explains how to show/hide the context menu items based on certain criteria applied on appointments.

Step 1: Create an Angular application with schedule control code example along with the context menu option by referring the instructions given in the following UG link.

https://help.syncfusion.com/angular/schedule/context-menu

Step 2: Within the beforeContextMenuOpen event of scheduler, the context menu sub-items and the target appointment details can be accessed. With the help of those information, we can show/hide the menu items on appointments that has specific subject criteria as shown below.

onBeforeContextMenuOpen(args: any): void {
    if (!ej.isNullOrUndefined(args.appointment)) {
      var scheduleObj: any = $("#Schedule1").data("ejSchedule");
      var menuObj = scheduleObj._contextMenu.data("ejMenu");
      menuObj.option("fields.dataSource", scheduleObj.model.contextMenuSettings.menuItems.appointment);
      if (args.appointment.Subject == "Bering Sea Gold")
        menuObj.hideItems("#open"); // hidden the open Appointment item in context menu 
      else
        menuObj.showItems("#open");
    }
  }

Step 3: Run the sample and right click on the first appointment which will display the single context menu item “Delete Appointment” option alone as shown below – as we have checked for the criteria that the “Open Appointment” sub-option should be hidden on the appointments with subject “Bering Sea Gold”.

Scheduler control displaying specific menu items on appointment based on criteria