action ("None", "ContextMenu", "HoverMenu", "ResizeEnd", "ResizeStart", "Move", "Bubble") - default action (see below)
backColor (string) - background color
bottom (number | string) - distance from bottom: number in pixels or string in CSS format
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 (string) - 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) - foreground color (applies to SVG symbols as well)
height (number | string) - hight: number in pixels or string in CSS format
horizontalAlignment ("center" | "left" | "right")
html (string) - HTML content (this raw value will not be HTML-encoded)
icon (string) - font icon CSS class, supports Font Awesome and similar font icons
id (string | number) - area id, optional
image (string) - image URL - SVG, PNG, JPEG formats are supported
left (number | string) - distance from left: number in pixels or string in CSS format
menu (DayPilot.Menu object) - context menu to be displayed on click when action === "ContextMenu"
nonFloating (boolean) - pixel-positioned active areas can be made non-floating by setting nonFloating to true (Scheduler only; since 2022.4.5448)
offsetX (number) - 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 (function) - event handler to be executed on click
onClicked (function) - event handler to be executed on click, after the default action
onMouseEnter (function) - event handler to be executed when mouse cursors enters the area
onMouseLeave (function) -event handler to be executed when mouse cursors leaves the area
padding (number) - padding in pixels
right (number | string) - distance from right: number in pixels or string in CSS format
start (DayPilot.Date object or date/time ISO string) - this value will be translated to left (Scheduler) or top (Calendar) - see below
style (string) - custom CSS
symbol (string) - SVG symbol path (e.g. "daypilot.svg#minichevron-right-2")
text (string) - text content; this value will be HTML-encoded
toolTip (string) - built-in tooltip (translates to title attribute)
top (number | string) - distance from top: number in pixels or string in CSS format
verticalAlignment ("center" | "top" | "bottom")
visibility ("Hover" | "Visible" | "TouchVisible") - area visibility (see below)
width (number | string) - width: number in pixels or string in CSS format
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).
Since version 2023.1.5533, these properties accept a string value in CSS format, including calculated values like "calc(90% - 1px)". If you use a number, it will be treated as pixels.
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
The onClick and onClicked event handlers receive 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() - in onClick, this method cancels the default action specified using the action property (applicable to "ContextMenu", "ResizeStart", "ResizeEnd", "Move")
The onMouseEnter and onMouseLeave event handlers receive 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)
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
The client-side image export supports the following content properties:
image
icon
symbol
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.
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.
const event = new DayPilot.Event({
start: "2012501-01T00:00:00",
end: "2025-01-02T00:00:00",
id: 1,
text: "Event 1",
areas: [
{
width: 40,
height: 40,
right: 0,
top: 0,
visibility: "Hover",
onClick: (args) => { DayPilot.Modal.alert('Event clicked: ' + args.source.id()); }
}
]
});