Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Date Picker with Multiple Day Selection
A React date picker allowing multiple individual date selection for choosing non-consecutive days like recurring event dates or availability marking
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Picking employee work schedules, selecting multiple training dates, or marking available days—sometimes you need several specific dates, not a range. This React multi-select date picker uses shadcn/ui Calendar with mode equals multiple, letting users click individual dates to build a custom set. Built with Radix UI and react-day-picker, selected dates highlight and users can click again to deselect—perfect for shift scheduling, event attendance, availability calendars, and any workflow requiring cherry-picked dates.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Date Range Picker
Select continuous start and end date ranges
Disabled Dates
Calendar with specific dates unavailable
Custom Styled Calendar
Calendar with custom day styling and modifiers
Appointment Picker
Calendar with time slot selection
Natural Language Shortcuts
Quick select buttons for common dates
Month and Year Selector
Dropdown selectors for month and year
Questions you might have
React Date Picker with Disabled Dates
A React date picker with disabled dates including weekends, specific date ranges, and individual unavailable days for business scheduling
React Date Picker with Custom Select Day Style
A React date picker with custom day styling using modifiers and modifiersStyles to highlight booked dates, holidays, or special occasions with colors