Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Multiple Day Selection in Dialog
A calendar dialog supporting multiple individual date selections for non-contiguous date choosing
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Calendar with Disabled Dates in Dialog
A calendar dialog with disabled date ranges, weekends, and specific dates for restricted date selection
React Calendar with Custom Select Day Style in Dialog
A calendar dialog with custom day styling using modifiers and modifiersStyles for visual date categorization