DayPilot.Task.data

The DayPilot.Task.data property holds the raw Gantt task data. Use this structure when passing event data to DayPilot.Task() constructor.

Core properties

  • id (string)

  • text (string)

  • start (DayPilot.Date or string convertible to DayPilot.Date)

  • end (DayPilot.Date or string convertible to DayPilot.Date; optional for type: "Milestone")

  • type (optional, "Task" if not specified)

  • complete (optional, integer; 0 if not specified)

  • children (optional, array of child tasks)

  • tags (custom properties)

Optional box properties (box)

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

  • box.backColor

  • box.backImage

  • box.backRepeat

  • box.barBackColor

  • box.barColor

  • box.barHidden

  • box.bubbleHtml (string, static bubble HTML)

  • box.clickDisabled (boolean, set to true to disable event click)

  • box.contextMenu

  • box.cssClass

  • box.doubleClickDisabled (boolean, set to true to disable event double click)

  • box.html (if not specified, complete percentage is used for tasks, empty string for groups and milestone)

  • box.htmlLeft (string; text next to the left side of the task box)

  • box.htmlRight (string; text next to the right side of the task box - if not specified, text is used)

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

  • box.moveDisabled (boolean, set to true to disable event moving)

  • box.resizeDisabled (boolean, set to true to disable event resizing)

  • box.rightClickDisabled (boolean, set to true to disable event right click)

  • box.toolTip (if not specified, text is used)

Optional row properties (row)

  • row.html

  • row.hidden

  • row.areas (array)

  • row.toolTip

  • row.backColor

  • row.cssClass 

  • row.contextMenu

  • row.collapsed

  • row.marginBottom

  • row.minHeight

Example

{
  id: 1
  start: "2025-01-01T09:00:00",
  end: "2025-01-01T13:00:00",
  text: "Task 1",
  box: {
    cssClass: "my-task",
    resizeDisabled: true
  },
  row: {
    html: "Task 1 (important)"
  }
}