Split Tasks

Split tasks are a PRO feature. See licensing and trial info.

Split tasks let you represent interrupted work within a single logical task. Instead of a single continuous bar, the task renders as two or more segments — each with its own start and end date — in the same row.

The `splitTasks` Prop

Enable split task support on the <Gantt> component:

<Gantt splitTasks={true} tasks={data.tasks} links={data.links} scales={data.scales} />

Prop	Type	Default	Description
`splitTasks`	`boolean`	`false`	Enables rendering and editing of task segments.

The `segments` Field on Tasks

A split task is defined by adding a segments array to the task object. Each segment is a partial ITask with at minimum start and end (or duration) values:

interface ITask {
  // ... standard fields ...
  segments?: Partial<ITask>[]; // array of time segments
}

When segments is present, the task’s top-level start and end span the full range from the first segment start to the last segment end.

Example: Task with Multiple Segments

const tasks = [
  {
    id: 1,
    text: "Development work",
    parent: 0,
    type: "task",
    // The overall task spans the combined range
    start: new Date(2026, 3, 2),
    end: new Date(2026, 3, 20),
    segments: [
      {
        // First segment: April 2–7
        start: new Date(2026, 3, 2),
        end: new Date(2026, 3, 7),
      },
      {
        // Second segment: April 12–20 (gap between segments is free time)
        start: new Date(2026, 3, 12),
        end: new Date(2026, 3, 20),
      },
    ],
  },
];

Full Example

<script>
  import { getData } from "../data";
  import { Gantt, ContextMenu, Editor, Toolbar, Tooltip } from "@svar-ui/svelte-gantt";

  let api = $state();
  const data = getData("day", { splitTasks: true });
</script>

<Toolbar {api} />
<div class="gtcell">
  <ContextMenu {api}>
    <Tooltip {api}>
      <Gantt
        bind:this={api}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        splitTasks={true}
      />
    </Tooltip>
  </ContextMenu>
  <Editor {api} />
</div>

Interacting with Segments

When splitTasks is enabled:

Dragging a segment moves only that segment within the row.
Resizing a segment adjusts its individual start or end without affecting other segments.
Dragging the parent task bar (in the gap between segments) moves all segments together.
The task editor works at the segment level when a segment is the active element — activeTask can be set to { id, segmentIndex } to target a specific segment.

Custom tooltips work with split tasks. Use a custom Tooltip content component and check segmentIndex to display segment-specific information.

Get Started

Configuration

Guides

PRO Features

Migration

The `splitTasks` Prop

The `segments` Field on Tasks

Example: Task with Multiple Segments

Full Example

Interacting with Segments

​The splitTasks Prop

​The segments Field on Tasks

​Example: Task with Multiple Segments

​Full Example

​Interacting with Segments

The `splitTasks` Prop

The `segments` Field on Tasks

Example: Task with Multiple Segments

Full Example

Interacting with Segments