Skip to main content

Customization

Multiple months

Use numberOfMonths to render more than one calendar.

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
return <DayPicker numberOfMonths={2} />;
}

Paged navigation

When rendering multiple months, use pagedNavigation to navigate the number of months per time.

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
return <DayPicker numberOfMonths={2} pagedNavigation />;
}

Showing the outside days

Use showOutsideDays to display the days falling out the current month.

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
return <DayPicker showOutsideDays />;
}

Using fixed weeks

When showOutsideDays is turned on, use fixedWeeks to display six weeks per months. This will prevent the calendar to change its height when navigating.

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
return <DayPicker showOutsideDays fixedWeeks />;
}

Showing the week numbers

Use showWeekNumber to display the week numbers.

|
import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
const [weekNumber, setWeekNumber] = useState<number>();

const footer = weekNumber
? `You clicked the week n. ${weekNumber}.`
: 'Try clicking a week number.';

return (
<DayPicker
showWeekNumber
onWeekNumberClick={setWeekNumber}
footer={footer}
/>
);
}