Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Multiple Day Selection
A calendar with custom day rendering for displaying additional information like event indicators or availability dots
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Standard calendars show just numbers. This React calendar uses react-day-picker's custom day components to add event dots, availability indicators, or booking status. Built with shadcn/ui styling and component customization, each date displays supplemental information—perfect for event calendars, availability scheduling, or booking systems showing date-specific data.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Single Date Calendar
Basic calendar without custom rendering
Disabled Dates
Calendar with unavailable dates
Badge Component
Status indicators and labels
Multiple Date Selection
Select multiple individual dates
Tooltip Component
Hover information display
Calendar in Dialog
Calendar within modal dialog