Use numberOfMonths to display more months side-by-side. This property is responsive, so you could change the number of months on different breakpoints.

Jun 2022

Jul 2022

Open in Playroom

Showing Outside Days

Use showOutsideDays to display days falling in the next or the previous month.

Dec 2024

Open in Playroom

Disabling Days

Use disabled to disable one or more days. You can give it a date, a range, or a list that contains both.

Here's how to disable multiple days.

Jun 2022

Open in Playroom

Here's how to disable a range of days.

Jun 2022

Open in Playroom

Days with Events

Use booked to indicate a day, days, or range with events.

Jun 2022

Open in Playroom

API

mode

Required

The kind of selection to allow.

range

multiple

single

onChange

Required

Action to perform when selection changes.

value

The selected day, days, or range.

Date | Date[] | DateRange

month

The month displayed in the calendar.

Date

onMonthChange

Event fired when the user navigates between months.

((month: Date) => void)

numberOfMonths

The number of displayed months. Defaults to 1.

ResponsiveValue<1 | 2>

showOutsideDays

Show the outside days. An outside day is a day falling in the next or the previous month. Default is false.

true

false

disabled

Disable given day, days, range, or a combination of all.

Matcher | Matcher[]

booked

Show an indicator on the given day, days, range, or a combination to indicate having events.

Matcher | Matcher[]

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Sun	Mon	Tue	Wed	Thu	Fri	Sat