Our pure JavaScript Scheduler component


Post by mamin »

Hello,

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

image-20250409-185429.png
image-20250409-185429.png (11.62 KiB) Viewed 295 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.


Post by 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.

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post by 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?


Post by mats »

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

Should give you a very good starting point.


Post by 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?


Post by 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/

Arsalan
Developer Advocate


Post Reply