TimelineKit

API Reference

For full TypeScript definitions and detailed signatures, see the generated API documentation.

Properties

calendar: WorkingCalendarThe working calendar being edited. Setting replaces the entire calendar and re-renders all sections.
theme: WorkingCalendarThemeVisual theme. Assign a LightWorkingCalendarTheme or DarkWorkingCalendarTheme instance (or a customized one).
canEdit: booleanEnable/disable editing. When false, all inputs, toggles, and buttons are disabled. Default: true.
events: WorkingCalendarEventsEvent emitters for subscribing to changes (read-only).

Methods

validateShifts(): ShiftValidationResultValidate that shifts don't overlap and have valid ranges (start < end). Returns an object with valid, overlapping, and invalidRange fields.

Events

All events are RxJS Subject instances. Subscribe via editor.events.eventName$.subscribe(callback).

calendarChanged$: Subject<void>Emitted when any calendar property changes (working days, shifts, holidays, or start of week).
workingDaysChanged$: Subject<void>Emitted when a day toggle is clicked (day added or removed from workingDays).
shiftsChanged$: Subject<void>Emitted when a shift is added, removed, or its time is changed.
holidaysChanged$: Subject<void>Emitted when a holiday is added or removed via the calendar picker.
startOfWeekChanged$: Subject<void>Emitted when the start-of-week selector value changes.

Types & Interfaces

ShiftValidationResult

valid: booleanTrue 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 >= end.

DayOfWeek

type DayOfWeek'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday'

WorkingCalendar

workingDays: DayOfWeek[]Working days of the week.
shifts: WorkingShift[]Working time ranges within each day.
nationalHolidays: Date[]Non-working dates.
startOfWeek: DayOfWeekFirst day of the week.

WorkingShift

start: TimeOfDayStart time of the shift.
end: TimeOfDayEnd time of the shift.

TimeOfDay

hour: numberHour (0–23).
minute: numberMinute (0–59).

Theme Classes

WorkingCalendarThemeBase theme class with all style properties.
LightWorkingCalendarThemeLight theme preset (extends WorkingCalendarTheme).
DarkWorkingCalendarThemeDark theme preset (extends WorkingCalendarTheme).