Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Dialog

Calendar with Disabled Dates in Dialog for React

A button that opens a dialog with a calendar that disables weekends, a five-day range and one specific date.

Framework
UI library

The calendar with blocked days inside a Dialog: a Select Date button opens it, and weekends, the 3rd through the 7th and the 22nd can't be picked. Use it when a date is chosen in a modal step, such as rescheduling.

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 can't be picked?

disabled takes three matchers: { from, to } for the 3rd through the 7th, { dayOfWeek: [0, 6] } for Saturday and Sunday, and new Date(year, month, 22) for the 22nd.

Why are those dates built from year, month and day?

Those dates use new Date(year, month, day), which is local midnight. A date-only string such as 2025-06-01 is midnight UTC, still the previous day in time zones west of UTC.

How do I read the selected date?

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

What happens if someone clicks a disabled day?

That day can't be picked, so the selected date stays on the day already chosen. The rules cover weekends, the 3rd through the 7th, and the 22nd.

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.

Which numbers count as the weekend?

Sunday is 0 and Saturday is 6. disabled gets dayOfWeek: [0, 6].

All 16 calendar examples