What it looks like
Picture a pocket calendar inside a card with rounded corners. At the top, the name of the selected day appears large and bold; below, a row of buttons shows month, date and weekday. When you click another day, the old name melts into a blur and the new one forms in its place, like liquid letters merging. If the day has appointments, a list of events with title and time appears between the name and the buttons, sliding in from the right, and the card grows with a springy bounce; on an empty day it shrinks. Buttons grow on hover and sink on click.
You may be looking for this if you asked for something like
- a cute calendar that shows events when I click a day
- a weekly schedule card for my course website
- a list of today's appointments with a springy animation
- show upcoming classes or bookings in an animated way
- a date card that grows to show what is on that day
- an iPhone app style calendar for my events page
Also known as
- animated calendar
- event calendar
- calendar widget
- spring animation
- day picker
- schedule card
When to use
- Event, class or appointment schedules on course and clinic sites
- An event or conference program split by day
- An app dashboard with the week's appointments
- A launch page with dates for live sessions or cohorts
When to avoid
- Full-month schedules, since it only shows one row of days
- When people need to book a time: it displays events but has no form
How to ask your AI
I want an animated calendar with a spring effect on my classes page: buttons with the days of the week, and picking one expands the card and lists that day's events, with labels in my language, my theme colors, keyboard navigation and a version without animation.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Spring Calendar
How do I add my events to Spring Calendar?
Through the calendarData prop: a list of days, each with month, date, weekday and, optionally, events with a title, day and time. Spring Calendar opens on the day set by initialIndex and emits update:activeIndex when someone picks another day, so you can keep it in sync with the rest of your app.
Can I change the labels and icon in Spring Calendar?
Days, months and events come from your data, so they use whatever wording you write. The list heading, Upcoming Events, is hardcoded in the Spring Calendar code, so ask your AI to change it if you need other wording. The icon uses the Nuxt Icon component and has to be swapped in a plain Vue project.
Does Spring Calendar work with a keyboard and on phones?
Yes. The Spring Calendar days are native buttons, so they take focus with Tab, activate with Enter or Space and respond to taps. Colors come from theme tokens such as muted and primary and follow your project's light and dark themes. The spring animation does not change for reduced motion, so the prompt asks your AI for a static version.
