Calendar 10 - Month Calendar With Calendar List

Pro

A month calendar with a sidebar holding a mini month and checkboxes for each calendar, so events can be shown or hidden by calendar.

Shadcn Calendar 10 block

Component data

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

Calendar 10 block design & features

Calendar10 is a month calendar app layout built with shadcn/ui Button and Checkbox. A sidebar holds a new event button, a mini month with dots on busy days, and two lists of calendars with colored checkboxes and monthly counts. The main area has a today button, month arrows, the month title, and a full height grid where timed events show as a colored dot with title and all day items as tinted bars.

Unchecking a calendar hides its events from the grid and the mini month, and the arrows in either place change the month.

The style is familiar and well organized, close to a desktop calendar app with a calendar list. It is the most complete of the simple month views and a natural step toward week and day schedules. Content-driven: it needs events tagged by calendar.

On smaller screens the sidebar hides and colored toggles in the header filter the calendars.