---
id: months
title: Months
---

> DayPicker offers various props to customize the rendered months.

## Changing the initial month

Month navigation is controlled by the component. You can change the initial
month using the [initialMonth prop](./api/daypicker#initialMonth).

```jsx preview
function App() {
  return <DayPicker initialMonth={new Date(2020, 8)} />
}
```

## Controlling the month

Use the [month](./api/daypicker#month) and the
[onMonthChange](./api/daypicker#onMonthChange) event handler to switch to
uncontrolled mode.

```jsx preview
function App() {
  const [month, setMonth] = useState(new Date(2020, 8));
  return (
    <DayPicker
      month={month}
      onMonthChange={setMonth}
    />
  );
}
```

## Outside days

TODO: write docs

## Limiting the month navigation

To change the months within DayPicker can work, use the
[fromMonth](./api/daypicker#frommonth) or
[toMonth](./api/daypicker#tomonth) props. For example, the following day
picker is restricted to the year 2019.

```jsx preview
function App() {
  return (
    <DayPicker
      initialMonth={new Date(2020, 0)}
      fromMonth={new Date(2020, 0)}
      toMonth={new Date(2020, 11)}
    />
  );
}
```

## Rendering multiple months

To render multiple months,

- use [numberOfMonths](./props.mdx#numberofmonths) to set the amount of months to render;
- use [pagedNavigation](./props.mdx#pagednavigation) to navigate the number of months per time;
- use [reverseMonths](./props.mdx#reversemonths) to display the last month first.

```jsx preview
import { DayPicker } from 'react-day-picker';
import { isSameDay } from 'date-fns';

function App() {
  const [selectedDays, setSelectedDays] = useState([]);

  const handleDayClick = day => {
    setSelectedDays(state => {
      const selected = state.findIndex(d => isSameDay(d, day));
      if (selected > -1) {
        const newState = [...state];
        newState.splice(selected, 1); // remove already selected day
        return newState;
      }
      return [...state, day];
    });
  };

  return (
    <div>
      <h2>
        {selectedDays.length === 0
          ? 'Select some days'
          : `You picked ${selectedDays.length} day(s)`}
      </h2>
      <DayPicker
        fixedWeeks={true}
        numberOfMonths={2}
        reverseMonths={false}
        pagedNavigation={true}
        selected={selectedDays}
        onDayClick={handleDayClick}
      />
    </div>
  );
}
```
