Setup

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

Prerequisites

• A React project.
• 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/react-calendar

pnpm add @wx/react-calendar

yarn add @wx/react-calendar

bun add @wx/react-calendar

react is a peer dependency - React 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/react-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/react-calendar";

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

3. Mount the calendar

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

import { useRef } from "react";
import { Calendar, Editor, Willow } from "@wx/react-calendar";

const today = new Date();
const events = [
    {
        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",
    },
];

function App() {
    const api = useRef(null);

    return (
        <Willow>
            <Calendar ref={api} events={events} date={today} />
            {api.current && <Editor api={api.current} />}
        </Willow>
    );
}

export default App;

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/react-core.

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

import { Calendar } from "@wx/react-calendar";
import { Locale } from "@wx/react-core";
import { de } from "@wx/calendar-locales";
import { de as deCore } from "@wx/core-locales";

const words = { ...de, ...deCore };

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

export default App;

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:

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

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.