@composy/calendar-vue

@composy/calendar-vue

Vue 3 adapter for @composy/calendar-core.

Features

• useCalendar: reactive CalendarCore state, view data, navigation, localized title, weekday labels, hover date, and event summary.
• useCalendarEvents: reactive EventManager wrapper with batch deletion, conflict lookup, recurring occurrence expansion, and JSON/ICS import/export.
• useDatePicker: reactive single-date picker state and formatted value.
• useRangePicker: reactive range picker state, formatted value, day count, presets, and hover preview.
• useCalendarTheme: Vue wrapper for ThemeManager, ldesign- class names, CSS variable maps, stylesheet text, and optional document style injection.
• calendarVuePlugin and calendarEnginePlugin: service injection for Vue and engine-style runtimes, with typed InjectionKey exports and legacy string keys.

Quick Start

import {
  useCalendar,
  useCalendarEvents,
  useCalendarTheme,
  useRangePicker,
} from '@composy/calendar-vue'

const calendar = useCalendar({
  viewMode: 'month',
  showLunar: true,
  showWeekNumber: true,
  locale: 'zh-CN',
})

const events = useCalendarEvents(calendar.core.eventManager)
events.addEvent({
  title: 'Sprint planning',
  start: new Date(2026, 5, 9, 9, 0),
  end: new Date(2026, 5, 9, 10, 0),
  allDay: false,
})
const ics = events.exportToICS()
const importedEvents = useCalendarEvents()
importedEvents.importFromICS(ics)

const rangePicker = useRangePicker({ maxRange: 30 })
rangePicker.selectPreset('thisMonth')
rangePicker.setHoverDate(new Date(2026, 5, 12))

const theme = useCalendarTheme({ attachToDocument: true })

The ICS import/export methods support the subset and limitations documented by @composy/calendar-core.

useCalendar().weekdayLabels remains reactive when firstDayOfWeek changes, including updates made through the core instance or updateOptions().

Styling Contract

Vue does not duplicate style logic. It reuses @composy/calendar-core/styles.

const { classNames, cssVariables, cssText } = useCalendarTheme()

• Class names are always prefixed with ldesign-, for example ldesign-calendar, ldesign-calendar__day-cell, and ldesign-calendar--selected.
• Calendar variables use --ldesign-calendar-*.
• Color values reference packages/color generated variables such as --ld-primary-default and --ld-bg-surface.
• Size values reference packages/size generated variables such as --ld-px-40, --ld-font-base, and --ld-spacing-md.

Load the color and size token CSS before mounting calendar UI.

When attachToDocument is enabled, useCalendarTheme() creates a stylesheet with the default id ldesign-calendar-theme-styles and removes it when the owning component unmounts.

Plugin Usage

import { createApp } from 'vue'
import { calendarVuePlugin } from '@composy/calendar-vue'

const app = createApp(App)

app.use(calendarVuePlugin, {
  locale: 'zh-CN',
  loadChinaHolidays: true,
})

Typed injection keys are exported for new code. Legacy string keys are still provided for compatibility.

import { inject } from 'vue'
import { calendarInjectionKey, calendarThemeInjectionKey } from '@composy/calendar-vue'

const calendar = inject(calendarInjectionKey)
const theme = inject(calendarThemeInjectionKey)

useCalendar() can also wrap an existing CalendarCore instance without taking ownership of its lifecycle:

const calendar = useCalendar({ core: injectedCalendar })

Build Outputs

@composy/builder generates:

• dist/: browser bundle
• es/: ESM modules and declarations
• esm/: mirrored ESM modules
• lib/: CommonJS modules and declarations

Validation

pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run type-check:cjs
pnpm --dir packages/vue run lint:check
pnpm --dir packages/vue run build

Builder、ESLint 和 TypeScript 配置位于 packages/vue/.ldesign/；包根的传统配置路径为兼容 shim。

License

MIT