Skip to main content

tasks

Description​

Optional. Defines tasks in Gantt

Usage​

tasks?: {
    id?: string | number,
    // start is mandatory in incoming data; end or duration is optional - but one of them must be
    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
  }[];

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

  • 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.

info

The date format should be one of the supported by date-fns

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