Event Active Areas

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

• open a context menu
• display a bubble (through custom JavaScript)
• delete an event (through custom JavaScript)
• move handle (see also event drag handles)
• resize handle (see also event drag handles)
• run custom JavaScript

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.

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

• http://javascript.daypilot.org/demo/month/eventareas.html

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

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