[VUE 3] Right Click Custom Menu in Scheduler Pro

[mamin]

Hello,

We are trying to implement a right click menu that looks like this on events in Scheduler Pro:

image-20250409-185429.png (11.62 KiB) Viewed 297 times

It is a custom component that we have.
Is there a way to implement a custom menu like this on right click of an event on the scheduler?

Any info would be appreciated! Thanks.

[marcio]

Hey mamin,

Thanks for reaching out.

To implement a custom right-click menu on events in Scheduler Pro, you can use the EventMenu feature. You can customize the menu items by using the items config to add, modify, or remove items. Here's a basic example of how you can add a custom item:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                customItem : {
                    text : 'Custom Action',
                    icon : 'b-fa b-fa-fw b-fa-flag',
                    onItem({ eventRecord }) {
                        // Your custom action here
                        console.log(`Custom action for ${eventRecord.name}`);
                    }
                }
            }
        }
    }
});

If you want to replace the entire menu with your custom component, you might need to handle the context menu event manually and render your component instead.

If you need more detailed guidance or code examples, please provide more information about your custom component and how you plan to integrate it.

[mamin]

Thank you for the reply.

If you want to replace the entire menu with your custom component, you might need to handle the context menu event manually and render your component instead.

How would one go about doing this?

[mats]

Did you study this guide? https://bryntum.com/products/schedulerpro/docs/guide/Scheduler/customization/replacecontextmenu

Should give you a very good starting point.

[mamin]

Thanks Mats.

I am trying to render a Vue component like so:

 eventMenuBeforeShow: async ({
      eventRecord, items, event,
    }) => {
      // Remove default items if needed
      delete items.editEvent;
      delete items.deleteEvent;
      delete items.copyEvent;
      delete items.cutEvent;
      delete items.pasteEvent;
      delete items.splitEvent;
      delete items.showDetails;

  const currentUnit = scheduledTripUnitsManager.find(eventRecord.data.resourceId);
  const currentTrip = await signalr.invoke(TripListReqMsg, {
    id: eventRecord.data.id,
  });

  // Dynamically create and render the Vue component
  const compContainer = document.createElement('div');
  compContainer.id = 'zo-status-traverse-container';
  compContainer.style.position = 'absolute';
  compContainer.style.top = `${event.clientY}px`;
  compContainer.style.left = `${event.clientX + 10}px`; // Position to the right of the event
  console.log('compContainer', compContainer);
  document.body.appendChild(compContainer);

  const app = createApp(StatusTraverse, {
    qaId: 'status_traverse',
    info: { status: { code: currentTrip.status.id, value: currentTrip.status.value } },
    trip: currentTrip,
  });
  console.log('app', app);

  app.mount(compContainer);

  return false;
},
  },

StatusTraverse is a custom component that we have, and although I can get it to render, due to it having some ties to state management with Vuex and it being created dynamically, when the click action fires off on the component, there I run into some issues with Vuex being unrecognized (because a dynamically created component doesn't get state).

Is there a way to render a Vue component there without using createApp?

[khattakdev]

Hi there,

Can you try creating the custom Vue component and mounting it within App.vue, keeping it hidden by default. Then, when the event menu is triggered, you can control its visibility using a boolean flag.

Take a look at one of our demo where we are doing something similar : https://bryntum.com/products/scheduler/examples/frameworks/vue/javascript/custom-event-editor/dist/