Month and Week live in one sliding-pill toggle; switching between them crossfades, while paging through time (prev/next, Today) slides in the direction you're actually moving. Tapping a day no longer swaps out the whole calendar for a different view — it opens that day's agenda in a modal, list items checking in with a staggered entrance and each one disclosing its location on tap. New event (or Add event inside the modal) slides over to a create form — title, date, time, a category picker with a shared sliding ring, and an optional location — and confirming with Created! returns you to the agenda with the new event slotted in time order. Today breathes a soft pulsing ring, the selected cell's highlight glides between days via a shared layout animation, and the grid fills the full width of its container.

Install

Props

A booking calendar — tap two days, or take a shortcut like Weekend or 2 weeks. Every preset switch reshapes the same handful of elements instead of swapping them: the two knobs glide to their new days via a shared layout animation, the connecting fill bar (placed with CSS grid-column, not pixel math) reflows on a quick spring, and its color trails a beat behind on a slower tween — so it reads as one continuous move, not four things updating at once. Hovering a day after picking check-in previews the range with a hollow ring before it's committed, and the check-in/check-out underline slides to whichever field is next.

Props