Configuration

Read-only Mode

Set canEdit to false to lock the editor. All inputs, toggles, and buttons become disabled. Useful for displaying working calendar configuration without allowing changes.

// Disable editing
editor.canEdit = false;

// Re-enable
editor.canEdit = true;

Shift Validation

The editor automatically sorts shifts by start time and visually highlights overlapping or invalid shifts with a red border. You can also validate shifts programmatically via the validateShifts() method.

ShiftValidationResult

valid: boolean	True if all shifts have valid ranges and no overlaps.
overlapping: number[]	Indices of shifts that overlap with another shift.
invalidRange: number[]	Indices of shifts where start time is greater than or equal to end time.

const result = editor.validateShifts();

if (!result.valid) {
  if (result.overlapping.length > 0) {
    console.log('Overlapping shifts at indices:', result.overlapping);
  }
  if (result.invalidRange.length > 0) {
    console.log('Invalid range at indices:', result.invalidRange);
  }
}

Integration with Gantt & Scheduler

The WorkingCalendar data model is shared with the Gantt Chart and Resource Scheduler. 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.

import { WorkingCalendar } from '@timelinekit/core';

const calendar = new WorkingCalendar();

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

// Apply to Gantt Chart
ganttChart.workingCalendar = calendar;

// Apply to Resource Scheduler
scheduler.workingCalendar = calendar;