Skip to main content

assignments

PRO

The functionality is available in PRO Edition only

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​

<script setup>
  import { getData } from "./common/data";
  import { Gantt } from "@svar/vue-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 },
  ];
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :resources="resources"
    :assignments="assignments"
  />
</template>

Related articles: