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.


  • open a context menu
  • display a bubble (through custom JavaScript)
  • delete an event (through custom JavaScript)
  • move handler (see also event drag handles)
  • resize handler (see also event drag handles)
  • run custom JavaScript
  • visually split the object into segments (events/cells/time headers)


Position can be defined using CSS-like properties:

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

You can also set the horizontal position using date/time values - use Start()/End() methods on the server side or start/end properties on the client side.


By default, active areas are only visible on event hover.

Event with Hidden Areas

Event with Activated Areas (on Hover)

It is possible to make them permanently visible.

You can define active areas using BeforeEventRender event handler.


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: [
      onClick: function(args) {; },
      top: 3,
      bottom: 9,
      right: 2,
      width: 17,
      visibility: "Hover",
      css: "event_action_delete"

Supported "action" values:

  • "None"
  • "JavaScript"
  • "ContextMenu"
  • "HoverMenu"
  • "ResizeEnd"
  • "ResizeStart"
  • "Move"
  • "Bubble"

Active areas can be also added using onBeforeEventRender:

dp.onBeforeEventRender = function(args) {
      onClick: function(args) {; },
      top: 3,
      bottom: 9,
      right: 2,
      width: 17,
      visibility: "Hover",
      css: "event_action_delete"

The active area horizontal position can be specified using start/end time:

dp.onBeforeEventRender = function(args) {
  args.e.areas.push({start:, end:, top: 6, bottom: 6, backColor: "red"});

See Also


Related Tutorials

ASP.NET WebForms

Example: Adding custom icons

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_delete").JavaScript("dps.commandCallBack('delete', {id:e.value() });"));
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_menu").ContextMenu("cmSpecial"));

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

Supported action types:

  • .Bubble()
  • .ContextMenu(string menuId)
  • .HoverMenu(string menuId)
  • .JavaScript(string js)
  • .Move()
  • .ResizeEnd()



protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.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.