Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Calendar with Multiple Day Selection in Dialog for React

A Select Dates button that opens a calendar with the 6th, the 15th, and the 24th already selected.

Select Dates opens a dialog titled Select Multiple Dates. The 6th, the 15th, and the 24th of this month start selected. Another click adds a day or drops one.

Use it when several separate days are one step in a flow. Leave the grid on the page if people edit that list often. A Date Picker is the field version. In React, Base UI does not pick the extra days for you.

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

Anatomy

Calendar anatomy: prev trigger, month select, year select, next trigger, table, table cell

Usage

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Select Dates
  </DialogTrigger>
  <DialogContent className="sm:max-w-fit">
    <DialogHeader>
      <DialogTitle>Select Multiple Dates</DialogTitle>
    </DialogHeader>
    <Calendar
      className="rounded-md border"
      mode="multiple"
      onSelect={setDates}
      selected={dates}
    />
  </DialogContent>
</Dialog>

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.

API Reference

Dialog

No extra props in this demo. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Calendar

Sets mode="multiple", onSelect={setDates} and selected={dates}. The rest is on the Calendar page.

All 16 calendar examples