Column Header Active Areas

You can add custom active areas to column headers.

JavaScript

In the JavaScript Calendar component, you can define column header active areas using the onBeforeHeaderRender event handler:

const dp = new DayPilot.Calendar("dp", {
    viewType: "Resources",
    columns: [
        {name: "Room A", id: "A"},
        {name: "Room B", id: "B"},
        {name: "Room C", id: "C"},
        {name: "Room D", id: "D"},
    ],
    headerHeight: 40,
    onBeforeHeaderRender: args => {
        args.header.areas = [
            {
                right: "5",
                top: 5,
                width: 30,
                height: 30,
                fontColor: "#999999",
                symbol: "../icons/daypilot.svg#edit",
                padding: 3,
                cssClass: "icon",
                toolTip: "Edit...",
                onClick: async args => {
                    const form = [
                        {name: "Name", id: "name"},
                    ];
                    const data = args.source.data;
                    console.log(data);
                    const modal = await DayPilot.Modal.form(form, data);
                    if (modal.canceled) {
                        return;
                    }
                    const name = modal.result.name;
                    args.source.data.name = name;
                    dp.update();
                }
            }
        ];
    }
});
dp.init();

protected void DayPilotCalendar1_BeforeHeaderRender(object sender, BeforeHeaderRenderEventArgs e)
{
  e.Areas.Add(new Area().Right(1).Top(0).Width(17).Bottom(1).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.date);"));
}

protected override void OnBeforeHeaderRender(BeforeHeaderRenderArgs e)
{
  e.Areas.Add(new Area().Right(1).Top(0).Width(17).Bottom(1).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.date);"));
}