Skip to main content

calendar

The functionality is available in PRO Edition only

PRO

Description​

Optional. Sets a global working-time calendar for the Gantt chart

The global calendar applies to all tasks that don't have their own calendar assignment. When set, Gantt derives column highlighting from it and overrides the highlightTime prop.

Use calendar alone when every task follows the same working-time rules. Set it alongside calendars to choose which entry serves as the fallback for any task or resource that doesn't have its own calendar assigned.

Usage​

calendar?: true | CalendarConfig | string | number;
interface CalendarConfig {
    name?: string;
    weekHours?: {
        sunday?:    number;
        monday?:    number;
        tuesday?:   number;
        wednesday?: number;
        thursday?:  number;
        friday?:    number;
        saturday?:  number;
    };
    rules?: ICalendarRule[];
}
type ICalendarRule = IDateRule | IDateRangeRule | IRecurringRule | IWeekdayRule;

// single date override
interface IDateRule {
    type: "date";
    date: string;        // ISO date, e.g. "2024-12-25"
    hours: number;
    name?: string;
}

// inclusive date range
interface IDateRangeRule {
    type: "range";
    start: string;       // ISO date
    end: string;         // ISO date
    hours: number;
    name?: string;
}

// same month/day every year
interface IRecurringRule {
    type: "recurring";
    month: number;       // 1–12
    day: number;         // 1–31
    hours: number;
    name?: string;
}

// nth weekday of a month, or every occurrence
interface IWeekdayRule {
    type: "weekday";
    month?: number;      // 1–12, or omit for all months
    weekday: string;     // "monday" | "tuesday" | ...
    nth?: number;        // 1–5, or -1 for last, or omit for every occurrence
    hours: number;
    name?: string;
}

Parameters​

  • true - use the built-in 8-hour Mon–Fri working week
  • CalendarConfig - inline working-time config applied globally:
    • name - (optional) display name, informational only
    • weekHours - (optional) working hours per weekday; each omitted day defaults to 0
    • rules - (optional) declarative overrides applied on top of weekHours; each rule is one of: "date" (single date), "range" (inclusive date range), "recurring" (same month/day every year), "weekday" (nth weekday of a month or every occurrence)
  • string or number - the id of an entry in the calendars array; requires calendars to be defined

Example​

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

const { tasks, links } = getData();

// use the built-in default
function App() {
  return <Gantt calendar={true} tasks={tasks} links={links} />;
}

// or pass an inline config
function App() {
  return (
    <Gantt
      calendar={{ weekHours: { monday: 8, tuesday: 8, wednesday: 8, thursday: 8, friday: 8 } }}
      tasks={tasks}
      links={links}
    />
  );
}

export default App;

Related articles: