@wts-calendar/vue

Official Vue 3 adapter for @wts-calendar/core. It preserves a single core calendar instance across reactive updates, exposes getApi(), and performs deterministic teardown.

<script setup lang="ts">
import { ref } from 'vue';
import { WtsCalendarVue } from '@wts-calendar/vue';
import { createPluginCalendar } from '@wts-calendar/core/plugin-sdk';

const calendar = ref();
</script>

<template>
<WtsCalendarVue
  ref="calendar"
  :calendar-factory="createPluginCalendar"
  :initial-options="{ view: 'month', selectedDate: new Date() }"
  :events="events"
  :options="{ direction: 'rtl' }"
  @ready="onReady"
/>
</template>

initialOptions and calendarFactory are mount-only. Omit the factory for the standard core, or pass createPluginCalendar for advanced third-party plugins. Use options, events, and resources for live updates. Importing the package has no browser-global side effects and is SSR safe.

Controller and snapshot composables

useWtsCalendarController() exposes a readonly calendar ref plus onReady and onDestroy handlers. useWtsCalendarSnapshot(controller.calendar) provides a readonly reactive snapshot of the active view, events, resources, and pending work for application-owned editors and toolbars.

Pass a shallow ref containing the free opt-in event editor to useWtsCalendarEventEditorSnapshot(editorRef) for readonly editor mode, validation, busy, conflict, and value state.