Shadcn.io is not affiliated with official shadcn/ui
Calendar with Multiple Day Selection in Dialog
A calendar dialog supporting multiple individual date selections for non-contiguous date choosing
Single or range selection limits scheduling flexibility. This React calendar dialog enables selecting multiple individual dates with mode equals multiple using shadcn/ui and react-day-picker. Built with Dialog and Calendar components, users click multiple dates accumulating selections. Perfect for shift scheduling in workforce management, class attendance tracking, or availability calendars where users specify non-consecutive available dates without being constrained to single dates or continuous ranges.
Calendar with Multiple Day Selection in Dialog preview
Installation
Related Components
Multiple Selection Calendar Inline
Multi-date without dialog wrapper
Range Calendar Dialog
Dual-month range selection
Standard Dialog
Basic modal dialog structure
Disabled Dates Dialog
Calendar with date restrictions
Date & Time Dialog
Date picker with time input
Button Component
Action buttons
FAQ
Was this page helpful?
Sign in to leave feedback.