Spring Calendar

An animated calendar widget that expands to reveal events and features smooth, spring‑based Motion‑V transitions.

API

Prop 名称	类型	默认值	描述
`calendarData`	`Array<{ month: string; date: number; day: string; events?: { title: string; day: string; time: string }[] }>`	—	Array defining each calendar day and its optional events. Required.
`initialIndex`	`number`	`0`	Day index initially selected.

Event	Payload	描述
`update:activeIndex`	`number`	Fires when a day button is clicked, emitting the new active index.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/spring-calendar.json"

复制并粘贴以下代码：

SpringCalendar.vue

TextMorph.vue

Spring Animations — Uses MotionConfig to apply realistic spring/bounce transitions when height changes.
Dynamic Height — The outer card automatically grows to fit event listings.
TextMorph Integration — Day labels morph smoothly via the TextMorph sub‑component.
Interactive Day Picker — Clickable day chips with hover/press scale effects.
Responsive Layout — Flexbox layout that wraps chips and events neatly.

本页