DayPilot.Area Properties

  • action ("None""ContextMenu""HoverMenu""ResizeEnd""ResizeStart""Move""Bubble")
  • backColor (string)
  • bottom (distance from bottom in pixels)
  • bubble (DayPilot.Bubble object) - bubble that will be used for action: "Bubble"; if not specified the source object (e.g. event) bubble will be used
  • cssClass (CSS class name)
  • end (DayPilot.Date object or date/time ISO string; will be translated to right/width [Scheduler] or bottom/width [Calendar] - see below)
  • fontColor (string)
  • height (height in pixels)
  • horizontalAlignment ("center" | "left" | "right")
  • html (HTML content)
  • icon (font icon CSS class, supports Font Awesome and similar font icons)
  • id (id, optional)
  • image (image URL - SVG, PNG, JPEG formats are supported)
  • left (distance from left in pixels)
  • menu (context menu to be displayed on click when action === "ContextMenu"; a string will be evaluated)
  • offsetX (shifts the horizontal position by the specified number of pixels; useful when the position is specified using start/end; Scheduler only; since 2020.3.4659)
  • onClick (event handler to be executed on click)
  • padding (number; padding in pixels) 
  • right (distance from right in pixels)
  • start (DayPilot.Date object or date/time ISO string; will be translated to left [Scheduler] or top [Calendar] - see below)
  • text (text content)
  • top (distance from top in pixels)
  • verticalAlignment ("center" | "top" | "bottom")
  • visibility (visibility: "Hover" | "Visible" | "TouchVisible")
  • width (width in pixels)


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.

Possible combinations (Scheduler):

  • start + end
  • start + width
  • width + end
  • end (browser only, not supported during image export)
  • start (browser only, not supported during image export)


  • "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 also on touch devices)
  • "HoverMenu" - opens a context menu on mouse hover
  • "ResizeEnd" - immediately starts resizing the event using its end (works also on touch devices)
  • "ResizeStart" - immediately starts resizing the event using its start (works also on touch devices)
  • "Move" - immediately start moving the event (works also 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")


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

Image Export

The client-side image export supports the following content properties:

  • image
  • icon
  • text/html

If both text and html are specified, text is used during export.

The export also supports selected appearance properties:

  • backColor
  • fontColor
  • horizontalAligment
  • padding
  • verticalAlignment

See also JavaScript Scheduler: How to Export HTML to Image tutorial.

XSS Protection

Since version 2020.4.4701, the text property value is always HTML-escaped.

Please note that if both html and text are specified, html will be used.


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,
      height: 40,
      right: 0,
      top: 0,
      visibility: "Hover",
      onClick: function(args) { alert('Event clicked: ' +; }

See also