Schedule - binding a different event to open the ContextMenu (instead of right click)?

Question

Is there a way to bind something else to open the ContextMenu in the Schedule control (instead of the default right click)?

Ideally I'd like to have a button displayed in an appointment which would open the context menu, but the minimum I'd need is just being able to bind the context menu to anything else to avoid the use of right-click.

Note - I cannot bind it to the appointment item select, as I also need this separately.

Satheesh Kumar Balasubramanian · Answer

Hi Fabian,

We have prepared sample to open the content menu using button on the appointment.

https://codesandbox.io/s/ej2-vue-schedule-with-context-menu-sample-forked-kbicl?file=/src/App.vue



App.vue:     



















    onContextMenuBeforeOpen: function (args) { 
      let newEventElement = document.querySelector(".e-new-event");
      if (newEventElement) {
        remove(newEventElement);
        removeClass(
          [document.querySelector(".e-selected-cell")],
          "e-selected-cell"
        );
      }
      let targetElement = args.event.target;
      if (closest(targetElement, ".e-contextmenu")) {
        return;
      }
      let menuObj = this.$refs.menuObj;
      let scheduleObj = this.$refs.scheduleObj;
      this.selectedTarget = closest(targetElement, ".e-flat-menu");
      if (isNullOrUndefined(this.selectedTarget)) {
        args.cancel = true;
        return;
      }
      if (this.selectedTarget.classList.contains("e-flat-menu")) {
        let eventObj = scheduleObj.getEventDetails(this.selectedTarget);
        if (eventObj.RecurrenceRule) {
          menuObj.showItems(
            ["EditRecurrenceEvent", "DeleteRecurrenceEvent"],
            true
          );
          menuObj.hideItems(
            ["Add", "AddRecurrence", "Today", "Save", "Delete"],
            true
          );
        } else {
          menuObj.showItems(["Save", "Delete"], true);
          menuObj.hideItems(
            [
              "Add",
              "AddRecurrence",
              "Today",
              "EditRecurrenceEvent",
              "DeleteRecurrenceEvent",
            ],
            true
          );
        }
        return;
      }
      menuObj.hideItems(
        ["Save", "Delete", "EditRecurrenceEvent", "DeleteRecurrenceEvent"],
        true
      );
      menuObj.showItems(["Add", "AddRecurrence", "Today"], true);    },
Kindly try the above sample and let us know if this meets your requirement.

Regards,
Satheesh Kumar B

Fabian Caromel · Answer

Hi Satheesh,Thanks very much for the reply - I've actually ended up going in a slightly different direction, where I'm using a custom menu and disabling the default actions when needed via onPopupOpen.Thanks again.

Satheesh Kumar Balasubramanian · Answer

Hi Fabian, 

  
Thanks for the update. 
  
Since we are not able to get your point, could you please share more details like video or image that help us to validate further and provide the solution ASAP? 

Regards, 

Satheesh Kumar B