Theming & Localization

Themes

The Event Calendar ships with light and dark themes. See the Theming & Styles guide for full details on customization.

import { LightEventCalendarTheme, DarkEventCalendarTheme } from '@timelinekit/core';

// Apply a built-in theme
calendar.settings.theme = new DarkEventCalendarTheme();

// Customize a theme
const theme = new LightEventCalendarTheme();
theme.content.slotHeight = 56;
theme.content.entryHeight = 24;
theme.sidebar.width = 280;
calendar.settings.theme = theme;

Primary Color

Change the accent color across the entire calendar with a single property. The primaryColor cascades to today highlights, active view buttons, selected entry outlines, focus rings, and mini-calendar accents. Use primaryLightColor for the light background variant (today cell, active button background, mini-calendar selection).

const theme = new LightEventCalendarTheme();
theme.primaryColor = '#e91e63';      // pink accent
theme.primaryLightColor = '#fce4ec'; // light pink for backgrounds
calendar.settings.theme = theme;

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

Localization

The Event Calendar supports all locales available in TimelineKit. See the Localization guide for full details.

import { csLocale, deLocale, frLocale } from '@timelinekit/core';

// Switch locale
calendar.settings.locale = csLocale;