Skip to content

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

Free

Calendar with Range for React

A two-month calendar that starts with the 8th through the 22nd of this month selected, and the next month beside it.

Two months sit side by side. The range starts on the 8th through the 22nd of this month, and the second grid is the next month. The days between those dates are selected.

Use it for a booking, a report, or a filter that covers a period. Separate days that are not a stretch need multiple selection. A field that opens the two months is a Date Picker. In React, Base UI does not name the trip.

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

<Calendar
  className="rounded-md border"
  defaultMonth={date?.from}
  mode="range"
  numberOfMonths={2}
  onSelect={setDate}
  selected={date}
/>

FAQ

How do I read the start and end dates?

mode="range" makes selected an object with from and to, and onSelect updates it. numberOfMonths={2} shows two months. This demo starts at the 8th through the 22nd of the current month.

Which month is shown first?

defaultMonth is selected.from, so the first grid is the month the range starts in.

What range is selected at first?

The 8th through the 22nd of the current month. Both dates are in that month, and the second grid shows the following month.

What wraps the grids?

Calendar has rounded-md border.The border wraps both months.

How are the 8th and the 22nd built?

from and to are new Date(year, month, 8) and new Date(year, month, 22).

What does the change handler receive?

onSelect receives the next { from, to } and this demo stores it with setDate.

API Reference

Calendar

Sets defaultMonth={date?.from}, mode="range", numberOfMonths={2}, onSelect={setDate} and selected={date}. The rest is on the Calendar page.

All 16 calendar examples