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,

    deadline?: Date,

    calendar?: string | number,

    skipResourceCalendars?: boolean,

    rollup?: boolean,

    inactive?: boolean,

    manual?: boolean,

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

    constraint?: null | {
      type: "snet" | "snlt" | "fnet" | "fnlt" | "mso" | "mfo",
      date: Date,
    },
}[];

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. The date is exclusive: a task that ends on Friday has end set to Saturday 00:00. To show it as Friday, use inclusiveEnd
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
deadline - (optional) the target finish date of a task, shown once deadlines is enabled; editable and clearable from the task editor, and optionally can be visualized in a custom column | 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
skipResourceCalendars - (optional) if true, the task is scheduled by its own calendar only, ignoring calendars of assigned resources. Applies when schedule.resourceCalendars is enabled. For details, see Exclude a task from resource calendars | PRO feature
rollup - (optional) if true, the task appears as a rollup bar on its parent summary task | PRO feature
inactive - (optional) if true, the task is suspended. It keeps its dates and stays visible in both the grid and the chart with grey styling, but it does not contribute to calculations. Can be set on any task type except a split task segment. For a summary task, the value is derived from its child tasks. Requires inactiveTasks to be enabled. For details, see Inactive summary tasks | PRO feature
manual - (optional) if true, auto scheduling never moves this task. The task still takes part in scheduling: its successors are still scheduled relative to it, and its links and constraint are checked. Applies when schedule.auto is enabled. For details, see Manually scheduled tasks | 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
constraint - (optional) a scheduling rule that defines when a task must start or finish, applied when auto scheduling or critical path is enabled. Only leaf tasks and milestones can have a constraint, one per task. For details, see Constraints. | PRO feature
The field takes either null, which removes the constraint, or an object with the following parameters:
- type – (required) the constraint type which can be one of the following: "snet", "snlt", "fnet", "fnlt", "mso", "mfo"
- date – (required) the date the constraint applies to

Example

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

Related articles:

Description​

Usage​

Parameters​

Example​

Description

Usage

Parameters

Example