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}
/>
);
}