Shadcn.io is not affiliated with official shadcn/ui
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
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.
Date Picker with Multiple Day Selection preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Date Picker with Disabled Dates
A React date picker with disabled dates including weekends, specific date ranges, and individual unavailable days for business scheduling
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