Skip to main content

calendars

PRO

The functionality is available in PRO Edition only

Description​

Optional. Defines a registry of named working-time calendars for tasks and resources

An array of calendar definitions. Each entry requires a unique id that tasks and resources reference to opt into that schedule. See When to use calendar and calendars for details on how to combine the two props and how each calendar affects scheduling and row shading.

Usage​

calendars?: {
    id: string | number,
    name?: string,
    weekHours?: {
        sunday?:    number,
        monday?:    number,
        tuesday?:   number,
        wednesday?: number,
        thursday?:  number,
        friday?:    number,
        saturday?:  number,
    },
    rules?: ICalendarRule[],
    css?: string,
}[];

Parameters​

Each calendar object in the array has the following parameters:

  • id - (required) unique identifier referenced from task.calendar or resource.calendar
  • 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; see Calendar properties for rule shapes
  • css - (optional) CSS class applied to this calendar's non-working highlights per row

Example​

<script>
  import { Gantt } from "@svar-ui/svelte-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 },
    },
    {
      id: "weekends",
      name: "Weekends",
      weekHours: { saturday: 8, sunday: 8 },
      css: "weekend-shift",
    },
  ];

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

  const tasks = [
    { id: 1, text: "Regular work",       start: "2024-01-15", duration: 40 },
    { id: 2, text: "Server maintenance", start: "2024-01-20", duration: 16, calendar: "weekends" },
  ];
</script>

<Gantt
  {calendars}
  calendar="standard"
  {resources}
  {tasks}
/>

Related articles: