Grid and Months

Outside Days

By default, DayPicker hides the days falling into other months. Use showOutsideDays to display them.

Prop Name	Type	Description
showOutsideDays	boolean	Display the days that fall outside the month

<DayPicker showOutsideDays />

Fixed Weeks

In a year, months can have between 4 and 6 weeks. Use the fixedWeeks prop to always display 6 weeks per month. This will prevent the grid from changing its height while navigating the calendar.

Prop Name	Type	Description
fixedWeeks	boolean	Always render 6 weeks to avoid layout shift.

<DayPicker fixedWeeks showWeekNumber />

Multiple Months

To display multiple months in the calendar, use the numberOfMonths prop.

Prop Name	Type	Description
numberOfMonths	number	The number of displayed months. Default is 1.
pagedNavigation	boolean	Paginate the navigation.
reverseMonths	boolean	Render multiple months in reversed order.

<DayPicker numberOfMonths={2} />

Paged Navigation

With pagedNavigation, the navigation jumps by the specified number of months at a time.

Prop Name	Type	Description
pagedNavigation	boolean	Jump forward/backward by the number of displayed months at once.

<DayPicker numberOfMonths={2} pagedNavigation />