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 id="example" numberOfMonths={2} />;
}
SuMoTuWeThFrSa
SuMoTuWeThFrSa

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

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

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

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}
    />
  );
}
SuMoTuWeThFrSa
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 />;
}
MoTuWeThFrSaSu
18
19
20
21
22

Customizing week numbers​

| 
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}`
      }}
    />
  );
}
TuWeThFrSaSuMo
W18
W19
W20
W21
W22