TimelineKit

Theming & Localization

Themes

The Working Calendar ships with light and dark themes. See the Theming & Styles guide for general theming concepts.

import { LightWorkingCalendarTheme, DarkWorkingCalendarTheme } from '@timelinekit/core';

// Apply a built-in theme
editor.theme = new DarkWorkingCalendarTheme();

// Customize a theme
const theme = new LightWorkingCalendarTheme();
theme.toggle.borderRadius = 8;
theme.calendar.hoverBackgroundColor = '#e3f2fd';
editor.theme = theme;

Primary Color

Change the accent color across the entire editor with a single property. The primaryColor cascades to active day toggles, input focus borders, today highlight in the holiday calendar, and primary buttons.

const theme = new LightWorkingCalendarTheme();
theme.primaryColor = '#e91e63'; // pink accent
editor.theme = theme;

Individual sub-properties (e.g. toggle.activeBackgroundColor) override primaryColor when set to a non-null value.

Theme Properties

Root

font: FontDefault font for the component (name, size, weight, italic).
colorScheme: 'light' | 'dark'Color scheme hint for native browser elements. Default: 'light'.
primaryColor: stringPrimary accent color. Default: '#1a73e8'.
backgroundColor: stringBackground color for the component. Default: '#ffffff'.

section (WorkingCalendarSectionStyle)

labelColor: stringColor of section labels ('Working Days', 'Shifts', etc.). Default: '#555555'.
borderColor: stringBorder color between sections. Default: '#e0e0e0'.

toggle (WorkingCalendarToggleStyle)

backgroundColor: stringInactive toggle background. Default: '#f0f0f0'.
textColor: stringInactive toggle text color. Default: '#555555'.
activeBackgroundColor: string | nullActive toggle background. Falls back to primaryColor. Default: null.
activeTextColor: stringActive toggle text color. Default: '#ffffff'.
hoverBackgroundColor: stringHover background. Default: '#e0e0e0'.
disabledOpacity: numberOpacity when disabled. Default: 0.5.
borderRadius: numberBorder radius in pixels. Default: 4.

input (WorkingCalendarInputStyle)

backgroundColor: stringInput background. Default: '#ffffff'.
textColor: stringInput text color. Default: '#333333'.
borderColor: stringInput border color. Default: '#d0d0d0'.
focusBorderColor: string | nullInput focus border color. Falls back to primaryColor. Default: null.
borderRadius: numberBorder radius in pixels. Default: 4.

button (WorkingCalendarButtonStyle)

backgroundColor: stringDefault button background. Default: '#f0f0f0'.
textColor: stringDefault button text color. Default: '#555555'.
hoverBackgroundColor: stringHover background. Default: '#e0e0e0'.
dangerColor: stringDanger button color. Default: '#c62828'.
dangerHoverBackgroundColor: stringDanger hover background. Default: '#fbe9e7'.
primaryBackgroundColor: string | nullPrimary button background. Falls back to primaryColor. Default: null.
primaryTextColor: stringPrimary button text color. Default: '#ffffff'.
primaryHoverBackgroundColor: string | nullPrimary hover background. Falls back to primaryColor. Default: null.
borderRadius: numberBorder radius in pixels. Default: 4.

calendar (WorkingCalendarCalendarStyle)

backgroundColor: stringCalendar background. Default: '#ffffff'.
textColor: stringDay text color. Default: '#333333'.
headerTextColor: stringMonth/year header text color. Default: '#333333'.
weekendTextColor: stringWeekend day text color. Default: '#777777'.
otherMonthTextColor: stringText color for days outside current month. Default: '#b0b0b0'.
todayTextColor: stringToday highlight text color. Default: '#ffffff'.
todayBackgroundColor: string | nullToday highlight background. Falls back to primaryColor. Default: null.
holidayBackgroundColor: stringSelected holiday background. Default: '#fce4ec'.
holidayTextColor: stringSelected holiday text color. Default: '#c62828'.
hoverBackgroundColor: stringDay hover background. Default: '#f0f0f0'.
navButtonColor: stringNavigation arrow color. Default: '#555555'.
navButtonHoverBackgroundColor: stringNavigation arrow hover background. Default: '#f0f0f0'.
nonWorkingDayBackgroundColor: stringBackground for non-working days. Default: '#f5f5f5'.

Localization

The Working Calendar Editor currently uses English labels for section headings and day abbreviations. See the Localization guide for locale support in other TimelineKit components.