Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Dialog

Calendar with Custom Select Day Style in Dialog for React

A button that opens a dialog with a calendar of round days and booked dates in bold.

Framework
UI library

The round-day calendar inside a Dialog: a Select Date button opens it, and the three booked days of the month are shaded and bold. Use it when the calendar is a step in a flow rather than part of the page.

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

Which days are highlighted as booked?

The 6th, the 14th and the 25th of the current month are the booked modifier. modifiersClassNames.booked paints the day button with bg-warning/20, font-bold and text-warning-foreground.

How do the days become circles?

classNames.day_button is rounded-full. classNames.today is rounded-full bg-muted text-foreground.

Can someone still pick a booked day?

Yes. The booked styling is a class on the day. The calendar still selects a single date, including the 6th, the 14th or the 25th.

How do I read the selected day?

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

How is the dialog opened?

DialogTrigger is a button reading Select Date. It opens DialogContent with sm:max-w-fit, and DialogTitle reads Select Date.

How are those three dates built?

bookedDays maps 6, 14 and 25 through new Date(year, month, day) for the current month, then passes them as modifiers.booked.

All 16 calendar examples