Working Calendar

An interactive editor for defining working days, shifts, and holidays. Perfect for project planning tools, HR systems, and scheduling applications that need to capture work-time configuration.

View Docs Examples

Features

Working Days

Toggle individual days of the week on or off. Instantly see which days are active with clear visual feedback.

Shift Management

Define multiple work shifts with start and end times. Add, remove, and reorder shifts with automatic sorting.

Holiday Calendar

Built-in monthly calendar for selecting national holidays. Holidays are listed with one-click removal.

Start of Week

Configure which day the week starts on. The holiday calendar and day toggles adapt automatically.

Shift Validation

Detect overlapping or invalid shifts programmatically via the validateShifts() API. Visual indicators highlight conflicts.

Theming

Light and dark themes included. Customize the primary color and individual style properties via the theme API.

Read-only Mode

Lock the editor to prevent changes. Useful for displaying working calendar data without allowing edits.

Change Events

React to user changes with granular events for working days, shifts, holidays, and start-of-week modifications.

Framework Support

First-class wrappers for React, Angular, and Vue with typed APIs and ref-based access to the calendar instance.

Built into Gantt & Scheduler

The WorkingCalendar data model is shared with the Gantt Chart and Resource Scheduler components. Both accept a workingCalendar property that controls which days and hours are considered working time — affecting task scheduling, duration calculations, and non-working time highlighting.

Use the Working Calendar Editor as a UI for your users to configure their work schedule, then pass the same WorkingCalendar instance to the Gantt or Scheduler to apply it immediately.

// The same WorkingCalendar instance powers all components
const calendar = new WorkingCalendar();

// Let users configure it via the editor
workingCalendarEditor.calendar = calendar;

// Apply it to the Gantt Chart or Scheduler
ganttChart.workingCalendar = calendar;
scheduler.workingCalendar = calendar;

Quick start

Set up a working calendar editor in a few lines of code.

App.tsx

import { useRef, useEffect } from 'react';
import { WorkingCalendarEditor, WorkingCalendarEditorRef } from '@timelinekit/react';
import { WorkingCalendar, WorkingShift, TimeOfDay } from '@timelinekit/core';
import '@timelinekit/core/styles';

export default function App() {
  const ref = useRef<WorkingCalendarEditorRef>(null);

  useEffect(() => {
    if (!ref.current) return;
    const cal = new WorkingCalendar();
    cal.workingDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
    cal.shifts = [
      new WorkingShift(new TimeOfDay(8, 0), new TimeOfDay(12, 0)),
      new WorkingShift(new TimeOfDay(13, 0), new TimeOfDay(17, 0)),
    ];
    cal.startOfWeek = 'monday';
    cal.nationalHolidays = [new Date(2026, 0, 1), new Date(2026, 11, 25)];
    ref.current.calendar = cal;
  }, []);

  return (
    <div style={{ maxWidth: 420 }}>
      <WorkingCalendarEditor ref={ref} />
    </div>
  );
}

Start building with Working Calendar

All features included. A license removes the watermark.

View Docs