Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Standard

Calendar as Appointment Picker for React

A calendar beside a scrolling list of time slots for booking an appointment.

Framework
UI library

A Calendar and a column of fourteen time slots, from 9:00 AM to 4:30 PM, in one bordered frame. Pick a day, then a slot: the picked slot turns solid. The slots scroll in a Scroll Area that matches the calendar's height. Use it on booking pages where the day and the time are chosen together.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do I read the date the person picked?

mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from new Date().

How does a time slot get selected?

Each time is a Button with that string as value. The click handler stores event.currentTarget.value in selectedTime, and that button uses variant="default" while the others stay outline.

Where does the list of times come from?

The times are a fixed availableTimes array: 9:00 AM through 11:30 AM, then 1:00 PM through 4:30 PM, in 30 minute steps. The date handler only updates the date, so the highlighted time stays until a time button is clicked.

How does the time list scroll?

The times column is w-62, filled by an absolute inset-0 wrapper. ScrollArea has min-h-0 flex-1 under the heading Available Times, so the buttons scroll inside the row.

How is the calendar set beside the times?

A flex row with divide-x, overflow-hidden, rounded-md and border holds the calendar and the times column. The calendar is the first child, and the times column is w-62.

Does picking a new date clear the time?

The date state and selectedTime are separate. Choosing another day leaves the highlighted time in place until a time button is clicked.

All 16 calendar examples