Skip to main content

resources

PRO

The functionality is available in PRO Edition only

Description​

Optional. Defines resources in Gantt

An array of objects containing the resources data

Usage​

resources?: {
    id?: string | number,
    name?: string,
    avatar?: string,
    color?: string,
    role?: string,
    parent?: string | number,
    data?: IResource[],
    open?: boolean,
    calendar?: string | number,
    [key: string]: any,
}[];

Parameters​

Each resource object in the array has the following parameters:

  • id - (optional) the resource ID
  • name - (optional) the resource display name
  • avatar - (optional) image URL or data URI for the resource avatar
  • color - (optional) hex color for visual distinction
  • role - (optional) job title or category
  • parent - (optional) the parent resource ID; used for hierarchical structures
  • data - (optional) an array of child resources objects
  • open - (optional) if true, child resources are shown expanded at initialization; if false, the branch is collapsed
  • calendar - (optional) the id of a calendars entry; controls which days are highlighted as non-working in this resource's row (in grouped view and resource-load grid), and determines the resource's contribution to load cell calculations
  • key - (optional) allows defining additional custom fields for each resource object

Example​

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";

  const data = getData();

  const resources = [
    { id: 1, name: "Alice Johnson", role: "Developer", color: "#65D2FC" },
    { id: 2, name: "Bob Smith", role: "Designer", color: "#FFC975" },
    { id: 3, name: "Carol White", role: "Manager", color: "#58C3FE" },
  ];
</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  {resources}
/>

Related articles: