month-active-areas-events.png

Active areas can be used to extend the event functionality and to add visual hints to the event.

  • You can define the dimension and position relative to the event box.
  • Customize the active areas using custom HTML and styles.

Actions

Position

Position can be defined using CSS-like properties:

  • top
  • bottom
  • left
  • right
  • width
  • height

API

You can define active areas using BeforeEventRender event handler.

ASP.NET WebForms

protected void DayPilotMonth1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeEventRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dpm.commandCallBack('delete', {id:e.value() });"));
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_menu").ContextMenu("menu"));
}

The example styles ("event_action_delete" and "event_action_menu") are defined in Themes/areas.css stylesheet.

Demo

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dpm.commandCallBack('delete', {id:e.value() });"));
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_menu").ContextMenu("menu"));
}

The example styles ("event_action_delete" and "event_action_menu") are defined in Themes/areas.css stylesheet.

Demo

JavaScript

In JavaScript the active areas can be defined directly using the areas property of an event:

var e = new DayPilot.Event({
  start: new DayPilot.Date("2013-03-25T00:00:00").addHours(start),
  end: new DayPilot.Date("2013-03-25T12:00:00").addHours(start).addHours(duration),
  id: DayPilot.guid(),
  resource: "B",
  text: "Event",
  bubbleHtml: "Testing bubble",
  areas: [{"action":"JavaScript","js":"(function(e) { dp.events.remove(e); })","bottom":9,"w":17,"v":"Hover","css":"event_action_delete","top":3,"right":2}]
});
dp.events.add(e);

Demo