@wts-calendar/react

Official React 18/19 adapter for @wts-calendar/core. It creates one calendar instance on mount, exposes it through a ref, applies dynamic options transactionally, and destroys it on unmount.

import { useRef } from 'react';
import {
  WtsCalendarReact,
  type WtsCalendarReactHandle,
} from '@wts-calendar/react';
import { createPluginCalendar } from '@wts-calendar/core/plugin-sdk';

const ref = useRef<WtsCalendarReactHandle>(null);
<WtsCalendarReact
  ref={ref}
  calendarFactory={createPluginCalendar}
  initialOptions={{ view: 'month', selectedDate: new Date() }}
  events={events}
  options={{ direction: 'rtl' }}
/>

initialOptions and calendarFactory are mount-only. Omit calendarFactory for the standard core, or pass createPluginCalendar to enable advanced third-party plugins. Pass live dynamic changes through options, and use events or resources for collection replacement. The module does not access browser globals during import, so it is safe to import during SSR.

Controller and snapshot hooks

Use useWtsCalendarController() to connect application-owned editors or toolbars through the component's onReady and onDestroy callbacks. useWtsCalendarSnapshot(controller.calendar) provides a useSyncExternalStore-backed snapshot of the active view, events, resources, pending work, and destroyed state.

When using the free @wts-calendar/core/event-editor entry, useWtsCalendarEventEditorSnapshot(editor) exposes its open mode, validation, busy, conflict, and value state without bundling the editor into this adapter.