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: Font	Default font for the component (name, size, weight, italic).
colorScheme: 'light' \| 'dark'	Color scheme hint for native browser elements. Default: 'light'.
primaryColor: string	Primary accent color. Default: '#1a73e8'.
backgroundColor: string	Background color for the component. Default: '#ffffff'.

section (WorkingCalendarSectionStyle)

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

toggle (WorkingCalendarToggleStyle)

backgroundColor: string	Inactive toggle background. Default: '#f0f0f0'.
textColor: string	Inactive toggle text color. Default: '#555555'.
activeBackgroundColor: string \| null	Active toggle background. Falls back to primaryColor. Default: null.
activeTextColor: string	Active toggle text color. Default: '#ffffff'.
hoverBackgroundColor: string	Hover background. Default: '#e0e0e0'.
disabledOpacity: number	Opacity when disabled. Default: 0.5.
borderRadius: number	Border radius in pixels. Default: 4.

input (WorkingCalendarInputStyle)

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

button (WorkingCalendarButtonStyle)

backgroundColor: string	Default button background. Default: '#f0f0f0'.
textColor: string	Default button text color. Default: '#555555'.
hoverBackgroundColor: string	Hover background. Default: '#e0e0e0'.
dangerColor: string	Danger button color. Default: '#c62828'.
dangerHoverBackgroundColor: string	Danger hover background. Default: '#fbe9e7'.
primaryBackgroundColor: string \| null	Primary button background. Falls back to primaryColor. Default: null.
primaryTextColor: string	Primary button text color. Default: '#ffffff'.
primaryHoverBackgroundColor: string \| null	Primary hover background. Falls back to primaryColor. Default: null.
borderRadius: number	Border radius in pixels. Default: 4.

calendar (WorkingCalendarCalendarStyle)

backgroundColor: string	Calendar background. Default: '#ffffff'.
textColor: string	Day text color. Default: '#333333'.
headerTextColor: string	Month/year header text color. Default: '#333333'.
weekendTextColor: string	Weekend day text color. Default: '#777777'.
otherMonthTextColor: string	Text color for days outside current month. Default: '#b0b0b0'.
todayTextColor: string	Today highlight text color. Default: '#ffffff'.
todayBackgroundColor: string \| null	Today highlight background. Falls back to primaryColor. Default: null.
holidayBackgroundColor: string	Selected holiday background. Default: '#fce4ec'.
holidayTextColor: string	Selected holiday text color. Default: '#c62828'.
hoverBackgroundColor: string	Day hover background. Default: '#f0f0f0'.
navButtonColor: string	Navigation arrow color. Default: '#555555'.
navButtonHoverBackgroundColor: string	Navigation arrow hover background. Default: '#f0f0f0'.
nonWorkingDayBackgroundColor: string	Background 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.