Skip to main content

assignments

The functionality is available in PRO Edition only

PRO

Description​

Optional. Defines resource assignments to tasks in Gantt

An array of objects that link resources to tasks

Usage​

assignments?: {
    id?: string | number,
    task: string | number,
    resource: string | number,
    units?: number,
    [key: string]: any,
}[];

Parameters​

Each assignment object in the array has the following parameters:

  • id - (optional) the assignment ID; if not provided, set automatically
  • task - (required) the ID of the task being assigned
  • resource - (required) the ID of the resource assigned to the task; only leaf resources can be assigned (not parent/group resources); summary tasks cannot have assignments
  • units - (optional) allocation percentage from 0 to 100; affects load calculations in the resource timeline; Default: 100
  • key - (optional) allows defining additional custom fields for each assignment object

Example​

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

const data = getData();

const resources = [
  { id: 1, name: "Alice Johnson", role: "Developer" },
  { id: 2, name: "Bob Smith", role: "Designer" },
];

const assignments = [
  { id: 1, task: 1, resource: 1, units: 100 },
  { id: 2, task: 1, resource: 2, units: 50 },
  { id: 3, task: 2, resource: 1, units: 100 },
];

export default function App() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      resources={resources}
      assignments={assignments}
    />
  );
}

Related articles: