Calendar 4 - Month Calendar With Events

Pro

A full height month calendar where clicking any day opens a dialog to add an event, with event chips, a +N more count, and a day list below the grid.

Shadcn Calendar 4 block

Component data

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

Calendar 4 block design & features

Calendar4 is a full height month calendar made with Shadcn UI Button, Dialog, Field, and Input. A header holds the month title, previous and next arrows, a today button, and a new event button. The grid fills the remaining height with one cell per day, and each cell shows its date and up to two event chips with a colored dot, title, and time, followed by a +N more count. A strip under the grid lists the selected day's events.

Clicking any day cell opens a dialog with that date filled in, and clicking an event chip opens it for editing or deleting. The dialog takes a title, date, start and end times, and a calendar color, and clearing both times saves an all day event.

The look is clean and familiar, with soft tinted chips and hairline cell borders, close to a standard desktop calendar month view. Content-driven: it needs event titles, dates, and times.

On a narrow screen the chips collapse into dots and the day list under the grid carries the details.