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

import { getData } from "./data";
import { Gantt } from "@svar/react-gantt";

const data = getData();

export default function App() {
  return <Gantt tasks={data.tasks} unscheduledTasks={true} />;
}

Loading unscheduled tasks programmatically

To define a task as unscheduled, you can set the unscheduled property to 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}

import { useRef, useState, useEffect } from "react";
import { getData } from "../data";
import { Gantt, Editor, defaultColumns } from "@svar/react-gantt";
import { format } from "date-fns";

const rawData = getData();

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

// Customize how Start and Duration columns look for unscheduled tasks
const columns = defaultColumns.map(col => {
  const c = { ...col };

  if (c.id === "start") {
    c.template = (value, row) => (row.unscheduled ? "-" : format(value, "dd-MM-yyyy"));
  }

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

  return c;
});

export default function Example() {
  // Get Gantt API instance via ref
  const apiRef = useRef(null);
  const [api, setApi] = useState(null);

  // On mount, expose the Gantt instance to the Editor via api state
  useEffect(() => {
    setApi(apiRef.current);
  }, []);

  return (
    <>
      <Gantt
        ref={apiRef}
        columns={columns}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        unscheduledTasks={true}
      />

      <Editor api={api} />
    </>
  );
}