Skip to main content

Managing unscheduled tasks

The functionality is available in PRO Edition onlyPRO

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 mark specific tasks as unscheduled and customize their display. It shows how to:

  • mark some tasks as unscheduled in code
  • allow editing through the built-in Editor component
  • customize how Start and Duration columns look for unscheduled tasks
  • display unscheduled tasks in the sidebar using unscheduledTasks={true}
<script>
	import { getData } from "../data";
	import { Gantt, Editor, defaultColumns } from "@svar/svelte-gantt";
	import { format } from "date-fns";
	const rawData = getData();
	const data = { ...rawData };

	let api = $state();

	// Mark specific tasks as unscheduled
	data.tasks = data.tasks.map(task => {
	if (task.id === 10 || task.id === 12) {
		task = { ...task, unscheduled: true };
	}

	// Customize how Start and Duration columns look for unscheduled tasks
	const columns = defaultColumns.map(col => {
	if (col.id == "start")
		col.template = (value, row) =>
			row.unscheduled ? "-" : format(value, "dd-MM-yyyy");

	if (col.id == "duration")
		col.template = (value, row) =>
			row.unscheduled ? "-" : value;

	return col;
	});
</script>

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

<Editor {api} />