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