javascript scheduler 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

Demo

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

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