Search

Search components and blocks

Sign in

Calendar Blocks

Scheduling surfaces built on existing components, ready to drop into a page.

Full Calendar

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.

pnpm dlx shadcn@latest add @ditherui/full-calendar

January 1970

MeetingDesignPersonalDeadline
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Install

$ pnpm dlx shadcn@latest add @ditherui/full-calendar

Props

className / ...div propsReact.ComponentProps<"div">—

Suggested components