Skip to main content

Quick start

Get a Calendar on the page in a couple of minutes - install the package, render the widget with your events, and bolt on the editor when you're ready to let users change things.

Install​

The package ships as @svar-ui/vue-calendar. Pick whichever package manager you already use:

npm install @svar-ui/vue-calendar
yarn add @svar-ui/vue-calendar
bun add @svar-ui/vue-calendar

It's built for Vue 3 (Composition API), so you'll need a Vue 3 project. Older Vue versions won't work - the components rely on Composition API reactivity.

Import and render​

Import Calendar and pass it two things: an events array and a date that decides which day, week, or month is in view on first paint.

<script setup>
    import { Calendar } from "@svar-ui/vue-calendar";

    const date = new Date(2026, 4, 5);
    const events = [
        {
            id: 1,
            start: new Date(2026, 4, 5, 9, 0),
            end: new Date(2026, 4, 5, 10, 0),
            text: "Standup",
        },
    ];
</script>

<template>
    <Calendar :events="events" :date="date" />
</template>

Each event needs id, start, and end. Anything else - text, color, your own domain fields - is passed through to the renderers and event handlers untouched. Dates must be real Date instances; ISO strings won't render.

Out of the box you get the day, week, and month views with a toolbar on top. Switching views and stepping through dates already works - no extra wiring.

Add the editor​

A bare Calendar already supports drag-to-create, move, and resize, but clicking an event has no edit UI to open. To let users edit titles and other fields, grab the instance API with a template ref and mount the Editor next to the calendar.

<script setup>
    import { ref } from "vue";
    import { Calendar, Editor } from "@svar-ui/vue-calendar";

    const date = new Date(2026, 4, 5);
    const events = [
        {
            id: 1,
            start: new Date(2026, 4, 5, 9, 0),
            end: new Date(2026, 4, 5, 10, 0),
            text: "Standup",
        },
    ];

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

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

The v-if="api" guard matters: the template ref only resolves after the calendar mounts, so the editor needs to wait one render before it has an api to talk to. Once mounted, it reads the selected event from the calendar's reactive state - clicking an event opens it for editing automatically, and field changes auto-save on blur via the update-event action.

That's the full minimum: a rendered calendar plus a working editor. From here you can pick whichever direction matches what you're building.

minimal calendar widget rendered with the default day, week, and month views and a sample event

Where to go next​

  • Free vs PRO - what the open-source build covers and what PRO adds (agenda, year, resources, timeline, recurring events).
  • Core features - day, week, month, year, agenda, timeline, and resources views, plus the toolbar, filtering, and editing.
  • Layout & style - theming with Willow / WillowDark, time-grid scales, and per-cell / per-event styling.
  • Advanced features - recurring events, custom views, server persistence, import/export, accessories, and localization.
  • API reference - every prop, action, method, and helper exported by the package.