Work Days Calendar

The work days calendar is a PRO feature. See licensing and trial info.

The Calendar class lets you define which days and hours are working time. When a calendar is attached to the Gantt, task durations are measured in working hours/days and auto-scheduling skips non-working periods.

The `calendar` Prop

Create a Calendar instance and pass it to the <Gantt> component:

<script>
  import { Calendar } from "@svar-ui/svelte-gantt";
  const calendar = new Calendar({ ... });
</script>

<Gantt {calendar} ... />

ICalendarConfig

The Calendar constructor accepts an optional configuration object:

interface ICalendarConfig {
  name?: string; // optional identifier for the calendar
  weekHours?: {
    sunday?: number;
    monday?: number;
    tuesday?: number;
    wednesday?: number;
    thursday?: number;
    friday?: number;
    saturday?: number;
  };
}

Property	Type	Description
`name`	`string`	Optional label for the calendar instance.
`weekHours`	`object`	Working hours per day of the week. Set a day to `0` to mark it as non-working.

Basic Example

Configure a standard Monday–Friday, 8-hours-per-day work week:

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

  const { tasks, links, scales } = getData("calendar");

  const calendar = new Calendar({
    weekHours: {
      monday: 8,
      tuesday: 8,
      wednesday: 8,
      thursday: 8,
      friday: 8,
      saturday: 0,
      sunday: 0,
    },
  });

  let api = $state();
</script>

<Gantt
  {calendar}
  {tasks}
  {links}
  {scales}
  cellWidth={60}
  bind:this={api}
/>
<Editor {api} />

Calendar Interface

The Calendar instance exposes the following methods:

interface Calendar {
  // Returns true if the given date falls on a working day
  isWorkingDay(date: Date): boolean;

  // Add a custom rule function that returns the working hours for a given date
  addRule(rule: (date: Date) => number): void;

  // Returns a copy of the calendar, optionally overriding config
  clone(config?: ICalendarConfig): Calendar;

  // Add a number of working days to a start date
  addWorkingDays(start: Date, days: number, excludeEndDate?: boolean): Date | null;

  // Add a number of working hours to a start date
  addWorkingHours(start: Date, hours: number): Date | null;

  // Get the next working day after the given date
  getNextWorkingDay(date: Date): Date | null;

  // Get the previous working day before the given date
  getPreviousWorkingDay(date: Date): Date | null;

  // Get the number of working days between two dates
  getWorkingDays(start: Date, end: Date, excludeEndDate?: boolean): number;

  // Get the number of working hours between two dates
  getWorkingHours(start: Date, end?: Date, excludeEndDate?: boolean): number;

  // Override working hours for a specific date
  setDayHours(date: Date, hours: number): void;

  // Override working hours for a range of dates
  setRangeHours(start: Date, end: Date, hours: number): void;
}

Setting Exceptions with `setDayHours` and `setRangeHours`

Use setDayHours to mark individual dates as non-working (e.g. public holidays) or to give them custom hours:

// Mark a public holiday as non-working
calendar.setDayHours(new Date(2026, 0, 1), 0); // New Year's Day

// Mark a range of dates as non-working (e.g. company shutdown)
calendar.setRangeHours(
  new Date(2026, 11, 24),
  new Date(2026, 11, 26),
  0
);

Custom Rules with `addRule`

For more complex schedules, add a rule function that receives a Date and returns the working hours for that day:

calendar.addRule(date => {
  // Half-day on the last Friday of every month
  if (date.getDay() === 5) {
    const nextWeek = new Date(date);
    nextWeek.setDate(date.getDate() + 7);
    if (nextWeek.getMonth() !== date.getMonth()) {
      return 4; // 4 working hours instead of 8
    }
  }
  return null; // null means use the default weekHours rule
});

Rules added via addRule take precedence over weekHours. Individual day overrides set via setDayHours take precedence over both.

Using the Calendar with Auto-Scheduling

When a calendar and schedule are both active, all scheduling calculations (dependency propagation, duration measurement) use working time:

<Gantt
  {calendar}
  schedule={{ auto: true }}
  projectStart={new Date(2026, 3, 2)}
  ...
/>

Get Started

Configuration

Guides

PRO Features

Migration

The `calendar` Prop

ICalendarConfig

Basic Example

Calendar Interface

Setting Exceptions with `setDayHours` and `setRangeHours`

Custom Rules with `addRule`

Using the Calendar with Auto-Scheduling

​The calendar Prop

​ICalendarConfig

​Basic Example

​Calendar Interface

​Setting Exceptions with setDayHours and setRangeHours

​Custom Rules with addRule

​Using the Calendar with Auto-Scheduling

The `calendar` Prop

ICalendarConfig

Basic Example

Calendar Interface

Setting Exceptions with `setDayHours` and `setRangeHours`

Custom Rules with `addRule`

Using the Calendar with Auto-Scheduling