Calendar 15 - Multi Day Calendar

Pro

A day, three day, and week schedule with an inline quick add card, resizable events, and arrows that step by the number of days shown.

Shadcn Calendar 15 block

Component data

ID
calendar15
Access
pro
Created
Oct 11, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Calendar 15 block design & features

Calendar15 is a multi day calendar built with shadcn/ui Button and Input. The header holds previous and next arrows that move by the visible number of days, the date range, and a segmented switch for one day, three days, or a full week. Each day is a column on a 24 hour grid that opens scrolled to the morning, with today's date in a filled circle and a current time line.

Clicking an empty slot marks a one hour block and opens a small quick add card right next to it, with a title field, color swatches for the calendar, and a save button, so Enter adds the event without leaving the grid. Clicking an event opens the same card to rename, recolor, or delete it, and dragging the handle at the bottom of an event changes how long it lasts in quarter hour steps.

The three day default works well on tablets and narrow layouts, while the week option gives a wider overview. Colors come from the theme chart palette. Content-driven: it needs events with titles and times.

On a narrow screen the week option scrolls sideways, while the day and three day views fit the width.