Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar as Appointment Picker
A basic single-date calendar for simple date selection without range or dropdown features
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you just need users to pick one date. This React calendar keeps it simple—click a date, that's it. Built with shadcn/ui and react-day-picker in single mode, it provides the core calendar functionality without the complexity of ranges or dropdowns. Perfect for appointment booking, event registration, or any form needing a single date input.
Available Times
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Range Calendar
Date range selection with dual months
Month/Year Dropdown
Calendar with quick month/year navigation
Date Picker Input
Compact input with calendar popover
Calendar with Today Button
Single date calendar with quick actions
Calendar in Dialog
Calendar within modal dialog
Multiple Date Selection
Select multiple individual dates