Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Standard

Calendar with Disabled Dates for React

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

Framework
UI library

A Calendar that won't select weekends, the 3rd through the 7th of the current month, or the 22nd. Those days are dimmed and can't be picked. Use it for business days, delivery windows and anything with blackout dates.

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.

What wraps the grid?

The Calendar className is rounded-md border. The blocked days go to disabled.

Which numbers count as the weekend?

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

All 16 calendar examples