Skip to main content

Resource calendar

PRO

The functionality is available in PRO Edition only

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/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. By default, resource calendars do not affect task bar length, but you can enable this with the resourceCalendars option.

More about calendars, see: Calendar

Schedule tasks by resource calendars​

Set resourceCalendars: true in the schedule property to let assigned resources' calendars affect task dates:

<Gantt
  calendars={calendars}
  resources={resources}
  assignments={assignments}
  tasks={tasks}
  schedule={{ resourceCalendars: true }}
/>

A day is working for a task when:

  • the task's own calendar allows it (or the global calendar, if the task has no calendar), and
  • at least one of the assigned resources works that day.

For example, a task assigned to Alice (Mon–Fri) and Bob (Tue–Sat) runs Mon–Sat. Working hours per day still follow the task's own calendar.

When you assign or unassign a resource, the task moves to match the new working days and keeps its duration.

Exclude a task from resource calendars​

Set skipResourceCalendars: true for a task to schedule it by its own calendar only:

const tasks = [
  { id: 1, text: "Server maintenance", start: new Date(2026, 3, 4), duration: 2, skipResourceCalendars: true },
];

When schedule.resourceCalendars is enabled, the Editor shows the Skip resource calendars checkbox in the Scheduling tab.

Tasks without common working time​

If a task's calendar and its resources' calendars have no working day in common (for example, a weekend-only task assigned to a weekday-only resource), the task is scheduled by its own calendar. Its bar is dimmed and the whole row is highlighted as non-working.

Related samples:

Related articles: