Skip to main content

Customization

Multiple months#

Use the numberOfMonths to render more than one calendar.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker numberOfMonths={2} />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)
April 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st April (Thursday)
2nd April (Friday)
3rd April (Saturday)
4th April (Sunday)
5th April (Monday)
6th April (Tuesday)
7th April (Wednesday)
8th April (Thursday)
9th April (Friday)
10th April (Saturday)
11th April (Sunday)
12th April (Monday)
13th April (Tuesday)
14th April (Wednesday)
15th April (Thursday)
16th April (Friday)
17th April (Saturday)
18th April (Sunday)
19th April (Monday)
20th April (Tuesday)
21st April (Wednesday)
22nd April (Thursday)
23rd April (Friday)
24th April (Saturday)
25th April (Sunday)
26th April (Monday)
27th April (Tuesday)
28th April (Wednesday)
29th April (Thursday)
30th April (Friday)

Paged navigation#

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

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker numberOfMonths={2} pagedNavigation />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)
April 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st April (Thursday)
2nd April (Friday)
3rd April (Saturday)
4th April (Sunday)
5th April (Monday)
6th April (Tuesday)
7th April (Wednesday)
8th April (Thursday)
9th April (Friday)
10th April (Saturday)
11th April (Sunday)
12th April (Monday)
13th April (Tuesday)
14th April (Wednesday)
15th April (Thursday)
16th April (Friday)
17th April (Saturday)
18th April (Sunday)
19th April (Monday)
20th April (Tuesday)
21st April (Wednesday)
22nd April (Thursday)
23rd April (Friday)
24th April (Saturday)
25th April (Sunday)
26th April (Monday)
27th April (Tuesday)
28th April (Wednesday)
29th April (Thursday)
30th April (Friday)

Showing the outside days#

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

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker showOutsideDays />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
28th February (Sunday)
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)
1st April (Thursday)
2nd April (Friday)
3rd April (Saturday)

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 * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker showOutsideDays fixedWeeks />;
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
28th February (Sunday)
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)
1st April (Thursday)
2nd April (Friday)
3rd April (Saturday)
4th April (Sunday)
5th April (Monday)
6th April (Tuesday)
7th April (Wednesday)
8th April (Thursday)
9th April (Friday)
10th April (Saturday)

Showing the week numbers#

Use showWeekNumber to display the week numbers.

import * as React from 'react';
import { DayPicker, WeekNumberClickEventHandler } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const [weekNumber, setWeekNumber] = React.useState<number>();
const handleWeekNumberClick: WeekNumberClickEventHandler = (n) =>
setWeekNumber(n);
const footer = weekNumber
? `You clicked the week n. ${weekNumber}.`
: 'Try clicking a week number.';
return (
<>
<DayPicker
showWeekNumber
onWeekNumberClick={handleWeekNumberClick}
footer={footer}
/>
</>
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)
Try clicking a week number.