DHX Menu for multi day

Scheduler
#1

Is there a way to add the DHX Menu (the mini menu with Details,Edit,Delete icons) to multi-day events?

For multi-day events that are being displayed in the multi-day cell block at the top of the calendar, we’d like to still have the DHX menu option for them.

#2

Hello,

You can use dhx.ContextMenu to add a menu with the options Details, Edit, and Delete to multi-day events. Here’s how you can achieve that:
First, initialize the menu:

const menu = new dhx.ContextMenu();

Next, load the menu options:

const dataMenu = [
    { id: "details", value: "", icon: "mdi mdi-information" },
    { id: "edit", value: "", icon: "mdi mdi-pencil" },
    { id: "delete", value: "", icon: "mdi mdi-delete" },
];

menu.data.parse(dataMenu);

Then, when clicking on an event (onClick) use the showAt method to show the menu for multi-day events:

scheduler.attachEvent("onClick", function (id, e) {
    if (e.target.closest(".dhx_cal_event_line")) {
        scheduler.unselect();
        e.preventDefault();
        menu.showAt(e.target, "bottom");

        return false;
    };
    
    return true;
});

Styles:

.dhx_widget.dhx_menu li {
    display: inline-block;
}

.dhx_widget.dhx_menu {
    background-color: rgb(18, 120, 141);
    border-radius: 4px;
}

.dhx_menu-button__icon {
    color: white;
}

.dhx_widget.dhx_menu li button {
    padding: 2px;
}

.dhx_menu-item {
    min-width: 20px;
}

Here is an example: DHTMLX Snippet Tool . Please note that this is not a complete example, but based on it, you can modify it to suit your needs.

#3

Thank you Maksim! I appreciate the effort of your response. I believe that is something I can work with. Well done!