calendar-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

Position

Position can be defined using CSS-like properties:

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

In JavaScript, the vertical position specifier can be replaced with start and end property which accept DayPilot.Date values.

Visibility

By default, active areas are permanently visible. You can also make them visible on hover using visibility property.

Event with Hidden Areas

 event-calendar-area-inactive.png

Event with Activated Areas (on Hover)

event-calendar-area-active.png

Creating Active Areas

You can define active areas using onBeforeEventRender event handler.

JavaScript

In JavaScript the active areas can be defined directly in the data source or using onBeforeEventRender event handler. Use the areas property of DayPilot.Event.data object:

var e = new DayPilot.Event({
  start: "2020-02-04T12:00:00",
  end: "2020-02-04T14:00:00",
  id: "101",
  text: "Event",
  areas: [
    { onClick: function(args) { dp.events.remove(args.source); }, width: 15, height: 15, top:3, right: 3, cssClass: "event_action_delete" },
    { action: "ContextMenu", width: 15, height: 15, top: 3, right: 20, cssClass: "event_action_menu" }
  ]
});
dp.events.add(e);

The example styles ("event_action_delete", "event_action_menu") are defined in demo/themes/areas.css stylesheet.

Demo

Tutorial

ASP.NET WebForms

The default visibility in ASP.NET WebForms is Hover.

Example

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.CssClass = "calendar_white_event_withheader";

  e.Areas.Add(new Area().Right(3).Top(3).Width(15).Height(15).CssClass("event_action_delete").JavaScript("dpc1.eventDeleteCallBack(e);"));
  e.Areas.Add(new Area().Right(20).Top(3).Width(15).Height(15).CssClass("event_action_menu").JavaScript("dpc1.bubble.showEvent(e, true);"));
  e.Areas.Add(new Area().Left(0).Bottom(5).Right(0).Height(5).CssClass("event_action_bottomdrag").ResizeEnd());
  e.Areas.Add(new Area().Left(15).Top(1).Right(46).Height(11).CssClass("event_action_move").Move());
}

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

Demo

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.CssClass = "calendar_white_event_withheader";

  e.Areas.Add(new Area().Right(3).Top(3).Width(15).Height(15).CssClass("event_action_delete").JavaScript("dpc_areas.eventDeleteCallBack(e);"));
  e.Areas.Add(new Area().Right(20).Top(3).Width(15).Height(15).CssClass("event_action_menu").JavaScript("dpc_areas.bubble.showEvent(e, true);"));
  e.Areas.Add(new Area().Left(0).Bottom(5).Right(0).Height(5).CssClass("event_action_bottomdrag").ResizeEnd());
  e.Areas.Add(new Area().Left(15).Top(1).Right(46).Height(11).CssClass("event_action_move").Move());
}

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

Demo