Shadcn.io is not affiliated with official shadcn/ui
Calendar with Disabled Dates
A calendar with disabled dates highlighting unavailable or invalid dates through visual styling
Not all dates are selectable. This React calendar uses react-day-picker's disabled prop to mark unavailable dates with visual indicators. Built with shadcn/ui styling and matcher functions, it prevents weekend bookings, past date selection, or custom business logic—perfect for appointment schedulers, vacation booking, or any system with date availability constraints.
Calendar with Disabled Dates preview
Installation
Related Components
Single Date Calendar
Basic calendar without date restrictions
Range Calendar
Date range selection calendar
Date Picker Input
Input field with calendar popover
Calendar in Dialog
Calendar within modal dialog
Multiple Date Selection
Select multiple individual dates
Calendar with Footer
Action buttons for date selection
FAQ
Was this page helpful?
Sign in to leave feedback.