Setup

Install the SVAR Calendar package, import the pieces you need, and wrap the widget with a theme and locale.

Prerequisites

• A Svelte 5 project (runes are required).
• A package manager: npm, pnpm, yarn, or bun.

Steps

1. Install the package

Run one of the following in your project root:

npm install @wx/svelte-calendar

pnpm add @wx/svelte-calendar

yarn add @wx/svelte-calendar

bun add @wx/svelte-calendar

svelte is a peer dependency - Svelte 5 (runes) must already be installed in your project.

If you have a PRO or Trial edition, check how to install it properly.

2. Import the components you need

The package exports the main widget plus optional companions and themes:

import {
	Calendar,
	Editor,
	CalendarPanel,
	ContextMenu,
	Willow,
	WillowDark,
} from "@wx/svelte-calendar";

You only need Calendar. Import the rest as you add features:

• Editor - sidebar/modal event form bound to the calendar API.
• CalendarPanel - sidebar with calendar-group filters and a mini date picker.
• ContextMenu - right-click menu wrapper for the calendar.
• Willow, WillowDark - theme wrappers (light and dark).

Helpers and types live in the same entry point — see getToolbarItems, getMenuOptions, getEditorItems, registerEditorItem, registerCalendarView, parseICal / serializeICal, and RestDataProvider:

import {
	getToolbarItems,
	getMenuOptions,
	getEditorItems,
	registerEditorItem,
	registerCalendarView,
	parseICal,
	serializeICal,
	RestDataProvider,
} from "@wx/svelte-calendar";

import type {
	CalendarEvent,
	CalendarInstanceApi,
	CellContext,
	EventContext,
} from "@wx/svelte-calendar";

3. Mount the calendar

Pass an events array and a date to position the visible range:

<script lang="ts">
    import { Calendar, Editor, Willow } from "@wx/svelte-calendar";
    import type { CalendarEvent, CalendarInstanceApi } from "@wx/svelte-calendar";

    const today = new Date();
    const events: CalendarEvent[] = [
        {
            id: 1,
            start: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
            end:   new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 0),
            text: "Kickoff",
        },
    ];

    let api = $state<CalendarInstanceApi>();
</script>

<Willow>
    <Calendar bind:this={api} {events} date={today} />
    {#if api}<Editor {api} />{/if}
</Willow>

Willow (or WillowDark) injects the calendar's CSS variables. Wrap the widget once near the root of your page.

4. Add a locale (optional)

The widget renders in English by default. To switch language, install @wx/calendar-locales and wrap the calendar with <Locale> from @wx/svelte-core.

npm install @wx/calendar-locales @wx/svelte-core @wx/core-locales

<script lang="ts">
    import { Calendar } from "@wx/svelte-calendar";
    import { Locale } from "@wx/svelte-core";
    import { de } from "@wx/calendar-locales";
    import { de as deCore } from "@wx/core-locales";

    const words = { ...de, ...deCore };
</script>

<Locale {words}>
    <Calendar events={data} date={new Date()} />
</Locale>

Merge the calendar dictionary with the matching @wx/core-locales dictionary so toolbar buttons, weekday names, and month labels all translate together.

To switch locale at runtime, key the wrapper on the locale id so the calendar re-renders when it changes:

{#key locale}
    <Locale {words}>
        <Calendar {events} date={new Date()} />
    </Locale>
{/key}

Result

The calendar grid renders with the toolbar on top, the active view below, and your event at 10:00 today. With Editor mounted, clicking an event opens the sidebar form and saved changes flow through api.