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