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;

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;