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,
    lazy?: 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,

    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
    NOTE: at least two of the three date values (start/end/duration) are required to calculate the third

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

  • lazy - (optional) if true, enables dynamic loading of child tasks (when the task branch is opened, the request for tasks data is sent to the backend), which means their content will not be loaded during the initial loading; if false, all tasks data is loaded at the initialization

  • 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

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

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

  • base_duration - PRO feature (optional) baseline duration in days
    NOTE: at least two of the three date values (base_start/base_end/base_duration) are required to calculate the third

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

  • segments - PRO feature (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:

    • 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} />