Setup

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

Prerequisites

• A Vue 3 project (Composition API is 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/vue-calendar

pnpm add @wx/vue-calendar

yarn add @wx/vue-calendar

bun add @wx/vue-calendar

vue is a peer dependency - Vue 3 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/vue-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/vue-calendar";

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

3. Mount the calendar

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

<script setup lang="ts">
    import { ref } from "vue";
    import { Calendar, Editor, Willow } from "@wx/vue-calendar";
    import type { CalendarEvent, CalendarInstanceApi } from "@wx/vue-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",
        },
    ];

    const api = ref<CalendarInstanceApi>();
</script>

<template>
    <Willow>
        <Calendar ref="api" :events="events" :date="today" />
        <Editor v-if="api" :api="api" />
    </Willow>
</template>

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

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

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

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

<template>
    <Locale :words="words">
        <Calendar :events="data" :date="new Date()" />
    </Locale>
</template>

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:

<template>
    <Locale :key="locale" :words="words">
        <Calendar :events="events" :date="new Date()" />
    </Locale>
</template>

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.