Skip to main content

Managing unscheduled tasks

The functionality is available in PRO Edition only

PRO

Enabling unsheduledTasks functionality​

Unscheduled tasks are disabled by default. To enable support for them, set the unscheduledTasks property to true. This activates the full logic for handling unscheduled tasks, allows them to be shown in the tasks tree, and lets you assign or change their unscheduled state on the fly. Columns like Start and Duration will display a hyphen (-) for unscheduled tasks.

<script>
    import { getData } from "./data";
    import { Gantt } from "@svar/svelte-gantt";

    const data = getData();

</script>

<Gantt tasks={data.tasks} unscheduledTasks={true} />

Loading unscheduled tasks programmatically​

To define a task as unscheduled, you can set the unscheduled property to true in the task object via the tasks property:

{
  id: "task1",
  text: "Unscheduled task",
  unscheduled: true
}

Handling unscheduled tasks in UI​

All new tasks created via the UI are unscheduled by default. When unscheduledTasks={true} is enabled, tasks are displayed in the tasks tree, you can customize their appearance in columns, and it's possible to edit their scheduled/unscheduled state directly through the built-in Editor.

Adding unscheduled tasks​

You can mark tasks as unscheduled by setting the unscheduled: true flag directly on the task object. Such tasks have no start/end dates and appear in the sidebar with “–” placeholders (unless overridden with a custom template).

Editing unscheduled state in the Editor​

When the unscheduledTasks option is enabled, the Editor automatically adds a Schedule / Unschedule toggle. This button allows users to switch a task between scheduled and unscheduled states directly from the UI without manually modifying dates.

Customizing column templates​

You can override how unscheduled tasks appear in columns. For example, you can show a hyphen (“–”), a label, or any custom UI instead of the usual formatted dates or calculated duration.

Example​

The following example demonstrates how to:

  • load unscheduled tasks initially
  • display unscheduled task in UI using unscheduledTasks={true}
  • allow editing through the built-in Editor component
<script>
  import { Gantt, Editor } from "@svar/svelte-gantt";

  let api = $state();

  const tasks = [
    {
      id: 1,
      open: true,
      start: new Date(2023, 11, 6),
      duration: 8,
      text: "Gantt Widget",
      progress: 60,
      type: "summary"
    },
    {
      id: 2,
      parent: 1,
      start: new Date(2023, 11, 6),
      duration: 4,
      text: "Lib-Gantt",
      progress: 80
    },
    {
      id: 3,
      parent: 1,
      unscheduled: true, //unscheduled task
      text: "UI Layer",
      progress: 30
    }
  ];

  const links = [];

  const scales = [];
</script>

<Gantt
  bind:this={api}
  tasks={tasks}
  links={links}
  scales={scales}
  unscheduledTasks={true}
/>

<Editor {api} />

Related sample: Unscheduled tasks