Skip to main content

deadlines

The functionality is available in PRO Edition only

PRO

Description​

Optional. Enables deadline markers on the chart and the Deadline field in the task editor

Usage​

deadlines?: boolean;

Parameters​

  • true - enables deadline functionality:
    • a flag icon is displayed on the chart next to tasks with a deadline set; if a task is overdue, the icon turns red
    • the Deadline field appears in the Scheduling tab of the task editor
    • tasks can define the deadline property (see tasks)
  • false - (default) deadline functionality is disabled

Example​

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

const data = getData();
const tasks = structuredClone(data.tasks);
const { links, scales } = data;

for (let i = 0, task; i < tasks.length; task = tasks[i], ++i) {
  if (task?.type === "task" || task?.type === "milestone") {
    task.deadline = addDays(
      task.start,
      (i % 5 === 0 ? -1 : (i % 3) + 1) + (task.duration ?? 0)
    );
  }
}

function App() {
  return <Gantt tasks={tasks} links={links} scales={scales} deadlines />;
}

export default App;

Related articles: