DayPilot.Task.data

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

Declaration

DayPilot.Task.data

Notes

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

See Also

Task Loading [doc.daypilot.org]

Angular Gantt Chart [doc.daypilot.org]

React Gantt Chart Tutorial [code.daypilot.org]

Vue.js Gantt Chart Tutorial [code.daypilot.org]

DayPilot.Task Class