DayPilot.Area Properties

  • width (width in pixels)
  • height (height in pixels)
  • cssClass (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)
  • visibility (visibility: "Hover" | "Visible" | "TouchVisible")
  • html (inner HTML)
  • id (id, optional)
  • start (DayPilot.Date object or date/time ISO string; will be translated to left - see below)
  • end (DayPilot.Date object or date/time ISO string; will be translated to right/width - see below)
  • menu (context menu to be displayed on click when action === "ContextMenu"; a string will be evaluated)
  • onClick (event handler to be executed on click)
  • action ("None", "ContextMenu", "HoverMenu", "ResizeEnd", "ResizeStart", "Move", "Bubble")
  • image (image URL - SVG, PNG, JPEG formats are supported)
  • icon (font icon CSS class, supports Font Awesome and similar font icons)

Location

The values of width, height, top, left, right, bottom properties are translated to CSS styles of the same name. You should only use combinations that make sense (i.e. don't specify all of them).

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

Actions

  • "Default" - no action, the click event will bubble to the parent element (this named value is available since 2020.1.4283 as an equivalent of undefined value)
  • "None" - no action, the click event will not bubble to the parent element
  • "JavaScript" - custom JavaScript specified using "js" property is fired on click/tap (works on touch devices) - this is a legacy value used in ASP.NET WebForms and ASP.NET MVC versions
  • "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

Click Event

The onClick event handler receives an args parameter with the following structure:

  • args.area - the original area object
  • args.source - source object (e.g. DayPilot.Event for event active areas)
  • args.originalEvent - original click event object (MouseEvent)
  • args.preventDefault() - cancels the default action specified using action (applicable to "ContextMenu", "ResizeStart", "ResizeEnd", "Move")

Visibility

Three visibility values are supported:

  • "Hover" - the active area will only be visible when you hover the source object (e.g. an event)
  • "Visible" - always visible
  • "TouchVisible" - behaves as "Hover" on desktop and "Visible" on touch devices

Example

This example 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: [
    {
      width: 40,
      hheight: 40,
      right: 0,
      top: 0,
      visibility: "Hover",
      onClick: function(args) { alert('Event clicked: ' + args.source.id()); }
    }
  ]
});

See also