Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Custom Select Day Style
A calendar allowing multiple individual date selection for non-consecutive date picking
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Need to select your available interview days or pick multiple delivery dates? This React calendar enables multi-select mode with react-day-picker, letting users click multiple individual dates. Built with shadcn/ui styling and mode multiple, selected dates highlight independently—perfect for availability calendars, multi-day event registration, or flexible scheduling systems.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Single Date Calendar
Basic single date selection
Range Calendar
Continuous date range selection
Checkbox Component
Multiple option selection
Disabled Dates
Calendar with unavailable dates
Custom Day Rendering
Calendars with additional date information
Badge Component
Selection count indicators
Questions you might have
React Calendar with Multiple Day Selection
A calendar with custom day rendering for displaying additional information like event indicators or availability dots
React Standard Card
A basic React card component with title, description, content area, and action buttons for displaying structured information