Column Header Active Areas

You can add custom active areas to column headers.

ASP.NET WebForms

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);"));
}

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

Demo

• http://www.daypilot.org/demo/Calendar/ActiveAreas.aspx

ASP.NET MVC

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);"));
}

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

Demo

• http://mvc.daypilot.org/demo/Calendar/ActiveAreas

JavaScript

Using .columns property.

dp.viewType = "Resources";
dp.columns = [
  { name: "John", id: "J", areas: [{"action":"JavaScript","js":"(function(e) { alert(e.date);; })","bottom":1,"w":17,"v":"Hover","html":"<div><div><\/div><\/div>","css":"resource_action_menu","top":0,"right":1}]},
  { name: "Mary", id: "M", areas: [{"action":"JavaScript","js":"(function(e) { alert(e.date);; })","bottom":1,"w":17,"v":"Hover","html":"<div><div><\/div><\/div>","css":"resource_action_menu","top":0,"right":1}]}
];

Using onBeforeHeaderRender (useful when the columns are generated in day, work week, week, and days views).

dp.onBeforeHeaderRender = function(args) {
    args.header.areas = [{"action":"JavaScript","js":"(function(e) { alert(e.date);; })","bottom":1,"w":17,"v":"Hover","html":"<div><div><\/div><\/div>","css":"resource_action_menu","top":0,"right":1}];
};