How to use context menu on scheduler with kendo react ui

Question

Seeking Help with Kendo React Scheduler Context Menu Implementation

Hello everyone,

I hope this message finds you well. I am currently working on implementing a context menu (right-click functionality) in the Kendo React Scheduler UI, similar to the context menu in the Kendo React Grid example here.

Here is my component code :

import React, { useRef, useState } from "react";
import { Scheduler, DayView } from "@progress/kendo-react-scheduler";
import "@progress/kendo-theme-default/dist/all.css";
import { displayDate, sampleData } from "@/utils/data";
import { ContextMenu, MenuItem } from "@progress/kendo-react-layout";

export default function SchedulerKendo() {
  const [showContextMenu, setShowContextMenu] = useState(false);
  const [selectedAppointment, setSelectedAppointment] = useState(null);
  const offset = useRef({ left: 0, top: 0 });

  const handleContextMenuOpen = (e, dataItem) => {
    e.preventDefault();
    offset.current = { left: e.pageX, top: e.pageY };
    setSelectedAppointment(dataItem);
    setShowContextMenu(true);
  };

  const handleCloseContextMenu = () => {
    setShowContextMenu(false);
  };

  const handleDeleteAppointment = () => {
    // Handle logic for deleting the selected appointment
    console.log("Deleting appointment:", selectedAppointment);
    handleCloseContextMenu();
  };

  const handleContextMenuSelect = (e) => {
    switch (e.item.data.action) {
      case "deleteAppointment":
        handleDeleteAppointment();
        break;
      default:
    }
  };

  return (
    <div>
      <Scheduler data={sampleData} defaultDate={displayDate}>
        <DayView
          title="Two-Day-View"
          numberOfDays={2}
          slotDuration={60}
          slotDivisions={2}
          startTime={"07:00"}
          endTime={"19:00"}
          workDayStart={"08:00"}
          workDayEnd={"18:00"}
          onContextMenu={(e) => handleContextMenuOpen(e, e.dataItem)}
        />
      </Scheduler>
      <ContextMenu
        show={showContextMenu}
        offset={offset.current}
        onSelect={handleContextMenuSelect}
        onClose={handleCloseContextMenu}
      >
        <MenuItem
          text="Delete Appointment"
          data={{ action: "deleteAppointment" }}
          icon="delete"
        />
      </ContextMenu>
    </div>
  );
}

Despite implementing the context menu, right-clicking on the Scheduler doesn't seem to trigger the expected behavior. I would greatly appreciate any insights or guidance on what might be causing this issue and how to resolve it.

Thank you in advance for your time and assistance.