DayPilot.Area Properties

  • w|width (width in pixels)
  • h|height (height in pixels)
  • css (CSS class name)
  • right (distance from right in pixels)
  • top (distance from top in pixels)
  • left (distance from left in pixels)
  • bottom (distance from bottom in pixels)
  • v|visibility (visibility: "Hover" or "Visible")
  • html (inner HTML)
  • id (id, optional)
  • start (DayPilot.Date object; supported in Scheduler events, grid cells and time headers; will be translated to left)
  • end (DayPilot.Date object; supported in Scheduler events, grid cells and time headers; will be translated to right/width)
  • menu (context menu to be displayed on click when action === "ContextMenu"; a string will be evaluated)
  • js (javascript function to be executed on click when action === "JavaScript"; a string will be evaluated)
  • action ("None", "JavaScript", "ContextMenu", "HoverMenu", "ResizeEnd", "ResizeStart", "Move", "Bubble")

Location

The combination of w, h, top, left, right, bottom works as in CSS (don't specify all of them).

In selected Scheduler objects (events, grid cells, time headers) it is possible to specify the start and end using a DayPilot.Date value instead of left/right/w.

Actions

  • "None" - no action, default background action is overriden
  • "JavaScript" - custom JavaScript specified using "js" property is fired on click/tap (works on touch devices)
  • "ContextMenu" - opens a context menu on click/tap (works on touch devices)
  • "HoverMenu" - opens a context menu on mouse hover
  • "ResizeEnd" - immediately starts resizing the event using its end (works on touch devices)
  • "ResizeStart" - immediately starts resizing the event using its start (works on touch devices)
  • "Move" - immediately start moving the event (works on touch devices)
  • "Bubble" - opens an event bubble on mouse hover

If the "action" property is not specified, all events (mouseover, mousedown, etc.) will be transparently passed to the background. If you specify "None" these events will be canceled.

Context menu can be invoked using "ContextMenu" and "HoverMenu" actions. ContextMenu opens the menu on click, HoverMenu opens the menu on mouse hover.

Example

This code creates a new event with a 40x40 active area in the upper-right corner that will become visible on hover and open an alert box on click.

var event = new DayPilot.Event({
  start: "2013-01-01T00:00:00",
  end: "2013-01-02T00:00:00",
  id: 1,
  text: "Event 1",
  areas: [
    {
      w: 40,
      h: 40,
      right: 0,
      top: 0,
      v: "Hover",
      action: "JavaScript",
      js: function(e) { alert('Event clicked: ' + e.id()); }
    }
  ]
});

See also

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java