Skip to main content

tasks

Description​

Optional. Defines tasks in Gantt

Usage​

tasks?: {
    id?: string | number,

    start?: Date,
    end?: Date,
    duration?: number,

    data?: ITask[],
    open?: boolean,
    text?: string,
    details?: string,
    progress?: number,
    type?: "task" | "summary" | "milestone" | string,
    parent?: string | number,

    [key: string]: any,

    // PRO FEATURES (available in PRO Edition only)
    
    base_start?: Date,
    base_end?: Date,
    base_duration?: number,

    calendar?: string | number,

    rollup?: boolean,

    unscheduled?: boolean,

    segments?: {
      id?: string | number,
      start?: Date,
      end?: Date,
      duration?: number,
      text?: string,
      details?: string,
      [key: string]: any,
    }[],
}[];

Parameters​

Each task object in the array of tasks has the following parameters:

  • id - (optional) the task ID

  • start - (optional) the start date of a task

  • end - (optional) the end date of a task; you should specify either the end date or duration not both

  • duration - (optional) task duration in days

  • data - (optional) an array of child tasks objects

  • open - (optional) if true, in case a task has subtasks, the branch is open at initialization; if false, then it's closed.

  • text - (optional) a task name; in case of no text name, set to ""

  • progress - (optional) task progress which is the percentage value from 0 to 100

  • parent - (optional) the parent task ID; in case of no parent, set to 0

  • type - (optional) the task type which can be one of the following: "task", "summary", "milestone" or a custom one

  • key – (optional) allows defining additional custom fields for each task object

note

To enable lazy loading of child tasks, add lazy: true field to the task object. Gantt reads it via [key: string]: any but it controls whether child tasks are fetched on demand when the branch is first opened.

  • base_start - (required) the start date of a baseline | PRO feature

  • base_end - (optional) the end date of a baseline; you should specify either the base_end or base_duration not both | PRO feature

  • base_duration - (optional) baseline duration in days | PRO feature

  • calendar - (optional) the id of calendars entry; defines the working-time rules used to calculate this task duration, start, and end dates including drag, resize, auto-scheduling, and critical path; also controls which days are highlighted as non-working in this task's row on the standard timeline | PRO feature

  • rollup - (optional) if true, the task appears as a rollup bar on its parent summary task | PRO feature

  • unscheduled - (optional) if set to true, shows unscheduled tasks in the tasks tree area; false is set by default and unscheduled tasks are not displayed | PRO feature

  • segments - (optional) if a task is split (summary tasks and milestones cannot be split), defines an array of objects with the next parameters for each segment: | PRO feature

    • id – (optional) unique identifier of the segment
    • start – (optional) start date of the segment. One of start + (end or duration) must be provided
    • end – (optional) end date of the segment. Specify either end or duration, not both
    • duration – (optional) duration of the segment in days.Used instead of end
    • text – (optional) segment label. Defaults to an empty string if not provided
    • details – (optional) additional descriptive information for the segment
    • [key: string] – (optional) allows adding any number of custom properties to the segment object

Example​

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";
  
  const {links, scales, columns} = getData();
  
  const tasks = [
  {
    id: 1,
    open: true,
    start: new Date(2020, 11, 6),
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 60,
    type: "summary"
  },
  {
    id: 2,
    parent: 1,
    start: new Date(2020, 11, 6),
    duration: 4,
    text: "Lib-Gantt",
    progress: 80
  },
 ];


</script>    
    
<Gantt {tasks} {scales} {columns} {links} />

Related articles: