Shadcn.io is not affiliated with official shadcn/ui
Calendar with Multiple Day Selection
A calendar with custom day rendering for displaying additional information like event indicators or availability dots
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.
Calendar with Multiple Day Selection preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.