Properties Overview

Reactive props accepted by the <Calendar> component. Each entry links to a dedicated page with the full type signature and an example.

Properties

cellCss	Returns CSS class names applied to grid and month-grid cells
children	Sidebar slot rendered next to the calendar grid
date	Pivot date that determines the visible range on mount
eventContent	Custom Vue component that replaces the inner markup of each event
eventCss	Returns CSS class names applied to event wrappers
eventPopup	Custom Vue component rendered as the event card on event click
events	Array of events rendered by the calendar
init	One-shot callback that delivers the calendar instance API after store init
Properties Overview	All Calendar component props at a glance
readonly	Disables drag, create, and the toolbar add-event button
recurring	Enables expansion of events with rrule into concrete occurrences
toolbar	Configures or hides the toolbar above the calendar grid
tooltip	Custom Vue component rendered as a hover tooltip over events
view	Active calendar view id on mount
views	Lists which calendar views are available and how each one is configured

Event handlers

Each on* prop fires when the matching store action runs. Setting a prop is equivalent to calling api.on(action, handler) with a single listener.

For multiple listeners, cancellation, or pre-action interception, use the action API instead - see on and intercept. Each action page below documents both forms (Trigger / Observe / Intercept / Component handler).

Handlers

Prop	Action	Fires when
onnavigateto	navigate-to	The calendar jumps to a specific date and/or view.
onnavigatetime	navigate-time	Prev / Next / Today is dispatched.
onaddevent	add-event	A new event is added (drag-create, toolbar button, programmatic).
onupdateevent	update-event	An event is edited (inline edit, drag, resize).
ondeleteevent	delete-event	An event is deleted.
onselectevent	select-event	Selection changes (null payload deselects).
onmoveevent	move-event	Drag-progress dispatch - no built-in store mutation.
onfilterevents	filter-events	A filter predicate is applied or cleared.
onaction	action	A custom toolbar item or context-menu entry dispatches an action.

Usage

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

  function onaddevent({ event, id }) {
    console.log("added", id, event);
  }
</script>

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

For payload shape and intercept semantics, follow the link to the matching action page.