Event Active Areas

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

• 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

• 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

The visibility property determines when the active areas are displayed within a Scheduler event. By default, if no visibility property is specified, the active area will always be visible. The property supports the following values:

1. "Visible": The active area is always visible, regardless of user interaction. It will be displayed as a static part of the event.

2. "Hover": The active area is visible only when the user hovers over the event with their mouse cursor. This can be useful for displaying contextual actions or information when the user shows interest in a specific event.

3. "TouchVisible": The active area is visible on hover for desktop devices and always visible on touch devices. This provides a user experience that is adaptive to the type of device being used. On desktop devices, the active area becomes visible when the user hovers over the event with their mouse cursor. On touch devices, the active area is always visible, allowing users to interact with it easily.

To set the visibility property for an active area, include it in the area definition:

onBeforeEventRender: (args) => {
  args.data.areas = [
    {
      // ... other active area properties
      visibility: "Hover",
    },
  ];
},

Creating Active Areas

You can define active areas using onBeforeEventRender event handler.

JavaScript

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

const e = new DayPilot.Event({
  start: "2023-03-25T00:00:00",
  end: "2023-03-25T12:00:00",
  id: 1,
  resource: "B",
  text: "Event 1",
  areas: [
    {
      onClick: (args) => { dp.events.remove(args.source); },
      top: 3,
      bottom: 9,
      right: 2,
      width: 17,
      visibility: "Hover",
      cssClass: "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:

onBeforeEventRender: (args) => {
  args.data.areas = [{
      onClick: (args) => { dp.events.remove(args.source); },
      top: 3,
      bottom: 9,
      right: 2,
      width: 17,
      visibility: "Hover",
      cssClass: "event_action_delete"
    }
  ];
}

The horizontal position of an active area using start/end properties (date/time value) instead of left/right/width properties (pixels):

onBeforeEventRender: (args) => {
  args.data.areas = [
    {
      start: DayPilot.Date.today(),
      end: DayPilot.Date.today().addDays(1),
      top: 6,
      bottom: 6,
      backColor: "red"
    }
  ];
}

See Also

• Event Phases

Demo

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

Related Tutorials

• JavaScript Scheduler: Warm-Up and Cool-Down Time
  Use active areas to create custom event segments

• JavaScript Scheduler: How to Export HTML to Image
  Use active areas to include rich content (icons, text elements) in the exported image.

• JavaScript Scheduler: Lock Events using Context Menu
  Display a padlock icon for locked events.

• ASP.NET Core Field Service Scheduling: Tasks, Routes, and Travel Time
  Use a draggable icon to create a next stop on a scheduled route.

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

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