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

Visibility

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

Event with Hidden Areas

 event-calendar-area-inactive.png

Event with Activated Areas (on Hover)

event-calendar-area-active.png

It is possible to make them permanently visible.

You can define active areas using BeforeEventRender event handler.

ASP.NET WebForms

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

JavaScript

In JavaScript the active areas can be defined directly using the areas property of an DayPilot.Event.data:

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) { dpc1.eventDeleteCallBack(e);; })","v":"Hover","w":15,"css":"event_action_delete","h":15,"top":3,"right":3},
    {"action":"JavaScript","js":"(function(e) { dpc1.bubble.showEvent(e, true);; })","v":"Hover","w":15,"css":"event_action_menu","h":15,"top":3,"right":20},
    {"action":"ResizeEnd","left":0,"bottom":5,"v":"Hover","css":"event_action_bottomdrag","h":5,"right":0},
    {"action":"Move","left":15,"v":"Hover","css":"event_action_move","h":11,"top":1,"right":46}
  ]
});
dp.events.add(e);

Demo

Tutorial