Skip to main content

Resource calendar

You can define working calendars for individual resources. To do so, create calendars by defining their configuration with the calendars property, then set calendar IDs to the needed resources via the calendar field in the resources array.

import { Gantt } from "@svar-ui/react-gantt";

const calendars = [
  {
    id: "standard",
    name: "Standard",
    weekHours: { monday: 8, tuesday: 8, wednesday: 8, thursday: 8, friday: 8 },
  },
  {
    id: "part-time",
    name: "Part-time",
    weekHours: { monday: 4, tuesday: 4, wednesday: 4, thursday: 4, friday: 4 },
  },
];

const resources = [
  { id: "r1", name: "Alice", calendar: "standard" },
  { id: "r2", name: "Bob", calendar: "part-time" },
];

export default function App() {
  return <Gantt calendars={calendars} resources={resources} tasks={tasks} links={links} />;
}

When defined, resource calendars are used in load calculation in the Resource Load view, and resource-specific holidays are highlighted when Gantt is grouped by resource. Note that resource calendars do not affect task bar length, which depends only on the global and task calendar.

More about calendars, see: Calendar

Related samples: Resource calendars

Related articles: