html5 scheduler row header active area

You can define custom active areas for each row header of the JavaScript Scheduler component.

JavaScript

Use onBeforeRowHeaderRender event handler to define active areas:

<div id="dp"></div>
<script>

  const dp = new DayPilot.Scheduler("dp");
  // ...
  dp.resources = [
    { name: "Room A", id: "A" },
    { name: "Room B", id: "B" },
    { name: "Room C", id: "C" }
  ];
  dp.onBeforeRowHeaderRender = function(args) {
     args.row.areas = [
       {
         onClick: (args) => { alert(args.source.id); }, 
         top: 0,
         right: 0,
         width: 17, 
         height: 17, 
         visibility: "Hover", 
         cssClass: "resource_action_menu"
       }
     ];
  };
  dp.init();
</script>

Tutorial

ASP.NET WebForms

Use BeforeResHeaderRender event handler (e.Areas).

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeResHeaderRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(0).Right(0).Top(0).CssClass("resource_action_menu").Html("<div><div></div></div>").JavaScript("alert(e.Value);"));
}

The sample .resource_action_menu class is defined in Themes/areas.css.

Demo

ASP.NET MVC

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