scheduler-active-areas-event.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

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

Position

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.

Visibility

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

Event with Hidden Areas

 event-scheduler-asp.net-mvc-active-area.png

Event with Activated Areas (on Hover)

event-scheduler-asp.net-mvc-active-area-hover.png

It is possible to make them permanently visible.

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); },
      top: 3,
      bottom: 9,
      right: 2,
      width: 17,
      visibility: "Hover",
      css: "event_action_delete"
    }
  ]
});
dp.events.add(e);

Supported "action" values:

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

Active areas can be also added using onBeforeEventRender:

dp.onBeforeEventRender = function(args) {
  args.e.areas.push({
      action: "JavaScript",
      js: function(e) { dp.events.remove(e); },
      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: DayPilot.Date.today(), end: DayPilot.Date.today().addDays(1), top: 6, bottom: 6, backColor: "red"});
};

See also:

Demo

ASP.NET WebForms

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()

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("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.

Demo