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)
  • 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)
  • 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)


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 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")


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


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: ' +; }

See also