Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Standard

Calendar with Range for React

A two-month calendar for selecting a start and an end date.

Framework
UI library

A Calendar in range mode with this month and the next side by side. Click a start and an end, and the days between are shaded. It starts on the 8th through the 22nd of the current month. Use it for bookings, reports and filters that cover a period.

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 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.

All 16 calendar examples