Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Dialog

Calendar with Multiple Day Selection in Dialog for React

A button that opens a dialog with a calendar for selecting several separate days.

Framework
UI library

The multiple-day calendar inside a Dialog: a Select Dates button opens it, titled Select Multiple Dates, and each click toggles a day. Use it when people mark availability as one step of a flow.

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 selected days?

mode="multiple" makes selected an array of dates and onSelect the setter. This demo starts with the 6th, the 15th and the 24th of the current month.

Which days start selected?

The 6th, the 15th and the 24th of the current month. State starts as those three dates, before the dialog opens.

How is the dialog opened?

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

What does the change handler receive?

onSelect receives the next array of dates, and this demo stores it with setDates.

How are the starting dates built?

selectedDates maps 6, 15 and 24 through new Date(year, month, day).

What wraps the grid inside the dialog?

The Calendar className is rounded-md border, under the dialog title. One month is shown, because this demo sets no month count.

All 16 calendar examples