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 id="example" numberOfMonths={2} />;
}
October 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
November 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |
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 />;
}
October 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
November 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |
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 />;
}
October 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
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 />;
}
October 2023
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
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}
/>
);
}
October 2023
Su | Mo | Tu | We | Th | Fr | Sa | |
---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | |
8 | 9 | 10 | 11 | 12 | 13 | 14 | |
15 | 16 | 17 | 18 | 19 | 20 | 21 | |
22 | 23 | 24 | 25 | 26 | 27 | 28 | |
29 | 30 | 31 | |||||
Try clicking a week number. |
Switching to ISO Week Dates
DayPicker uses date-fns getWeek to calculate the week number. By default, the week starts on Sunday and the first week of the year is the one that contains January 1st.
Use ISOWeek
to switch using ISO Week Dates instead of the locale setting.
import React from 'react';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker ISOWeek showWeekNumber />;
}
October 2023
Mo | Tu | We | Th | Fr | Sa | Su | |
---|---|---|---|---|---|---|---|
39 | 1 | ||||||
40 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
41 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
42 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
43 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
44 | 30 | 31 |
Customizing week numbers
- use
weekStartsOn
to set the first day of the week. - use
firstWeekContainsDate
to set the day of January, which is always in the first week of the year. - use
formatters.formatWeekNumber
to change how week numbers are displayed.
import React from 'react';
import { DayPicker } from 'react-day-picker';
export default function App() {
return (
<DayPicker
showWeekNumber
weekStartsOn={2} // Tuesday as first day of the week
firstWeekContainsDate={4} // Number the first week of the year from day 4
formatters={{
// Add `W` prefix to week number
formatWeekNumber: (weekNumber) => `W${weekNumber}`
}}
/>
);
}
October 2023
Tu | We | Th | Fr | Sa | Su | Mo | |
---|---|---|---|---|---|---|---|
W39 | 1 | 2 | |||||
W40 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
W41 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
W42 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
W43 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
W44 | 31 |