DayPilot.Event.data

The data property holds the raw event data (the original object). Use this structure when passing event data to DayPilot.Event() constructor.

DayPilot Pro

Core properties (all components)

• id (string or number)

• text (string)

• start (DayPilot.Date object or string in ISO 8601 format)

• end (DayPilot.Date object or string in ISO 8601 format)

• resource (string or number; optional)

In the Queue component, the start and end properties can be replaced by duration (a DayPilot.Duration object or a number specifying the duration in seconds).

Optional properties (all components except of Queue)

• areas (array of objects with properties defined in DayPilot.Area class)

• backColor (string) - defines the event background color using inline background CSS style

• backImage (string) - defines the background image (CSS syntax)

• backRepeat (string) - defines the background image repeat rule (CSS syntax)

• borderColor (string) - defines border color using inline CSS; use "darker" to apply a darker shade of the background color

• bubbleHtml (string, static bubble HTML)

• clickDisabled (boolean) - set to true to disable event click

• contextMenu (DayPilot.Menu object) - custom context menu

• cssClass (string) - custom CSS class (accepts multiple classes, separated by space)

• deleteDisabled (boolean) - set to true to disable event deleting using the built-in icon

• doubleClickDisabled (boolean) - set to true to disable event double click

• fontColor (string) - defines the foreground color using inline color CSS style

• hidden (boolean) - set to true to hide the event

• html (string) - sets the raw HTML (if not specified, HTML-encoded value of text is used)

• moveDisabled (boolean) - set to true to disable event moving

• recurrent (boolean) - used in ASP.NET WebForms, ASP.NET MVC and Java versions (read-only)

• recurrentMasterId - recurrent master id, used in ASP.NET WebForms, ASP.NET MVC and Java versions (read-only)

• resizeDisabled (boolean) - set to true to disable event resizing

• rightClickDisabled (boolean) - set to true to disable event right click

• sort (array of strings) - defines values used for sorting

• tags (object) - object that stores custom event properties

• toolTip (string) - if not specified, text value is used

Optional properties (Scheduler)

• barBackColor (string) - CSS color of the event bar foreground

• barColor (string) - CSS color of the event bar background

• barHidden (boolean) - use true to hide the event bar

• borderRadius (string or number) - applies a custom border-radius style (number values will be transformed to px); available since 2024.3.6155 (see also eventBorderRadius)

• bubbleHtml (string) - HTML content of the bubble that appears on hover

• clickDisabled (boolean) - use true to disable event click

• complete (number) - progress percentage that will be used for the event bar in percent complete mode

• container (string or number) - specifies the container id; available since 2019.4.4052

• height (number) - custom height in pixels; available since 7.9.1266

• htmlLeft (string) - the HTML displayed next to the event, on the left side

• htmlRight (string) - the HTML displayed next to the event, on the right side

• line (number or "dedicated") - forced line position within a row - see scheduler event placement strategies

• linkCreateDisabled (boolean) - disables drag and drop link creation for this event (no link points will be visible on hover); available since 2023.2.5567

• moveVDisabled (boolean) - use true to disable vertical moving

• moveHDisabled (boolean) - use true to disable horizontal moving

• versions (array of objects) - defines event versions; each item can have the following properties: areas, start, end, text, html, backColor, fontColor, borderColor, backImage, backRepeat, complete, barColor, barBackColor, barImageUrl, barHidden, htmlRight, htmlLeft, cssClass, toolTip

Optional properties (Calendar)

• allday (boolean)

• barColor (string)

• barBackColor (string)

• barHidden (boolean)

• durationBarImageUrl (string; ignored in cssOnly mode)

Optional properties (Queue)

• areas (array of objects with properties defined in DayPilot.Area class)

• backColor (string)

• backImage (string)

• backRepeat (string)

• barColor (string)

• barHidden (boolean)

• borderColor (string)

• borderRadius (string or number) - applies a custom border-radius style (number values will be transformed to px); available since 2024.3.6180 (see also eventBorderRadius)

• bubbleHtml (string, static bubble HTML) - available since 2022.4.5467

• contextMenu (DayPilot.Menu)

• cssClass (string)

• fontColor (string)

• html (string; if not specified, text is used)

DayPilot Lite

Core properties (all components)

• id (string or number)

• text (string)

• start (string or DayPilot.Date)

• end (string or DayPilot.Date)

Optional properties (Calendar)

• backColor (string)

• barBackColor (string)

• barColor (string)

• barHidden (boolean)

• borderColor (since 1.3.205)

• cssClass (string)

• fontColor (string; since 1.3.205)

• html (string)

• resource (string or number)

• tags (object) - object that stores custom event properties

• toolTip (string)

Optional properties (Month)

• backColor (string; since 1.2.172)

• borderColor (string; since 1.3.215)

• cssClass (string; since 1.2.172)

• fontColor (string; since 1.3.215)

• html (string)

• tags (object) - object that stores custom event properties

• toolTip (string)

Example

const data = {
  id: 1,
  start: "2023-12-01T09:00:00",
  end: "2023-12-01T13:00:00",
  text: "Event 1",
  cssClass: "my-event",
  resizeDisabled: true
};

const e = new DayPilot.Event(data);

Storing Custom Properties

In order to avoid collision with property names that might be added in the future it is recommended to store custom properties in the tags object:

const data = {
  id: 1,
  start: "2023-12-01T09:00:00",
  end: "2023-12-01T13:00:00",
  text: "Event 1",
  cssClass: "my-event",
  resizeDisabled: true,
  tags : {
    category: "category1"
  }
};

const e = new DayPilot.Event(data);

You can access the custom tag values using DayPilot.Event.tag() method:

const category = e.tag("category");  // "category1"