---
sidebar_position: 3
---

# Customization

Use the customization props to customize the appearance of the calendar.

### Customization Props

| Prop Name         | Type                                                     | Description                                                      |
| ----------------- | -------------------------------------------------------- | ---------------------------------------------------------------- |
| `captionLayout`   | `"dropdown"` \| `"buttons"` \|<br/> `"dropdown-buttons"` | Change the layout of the caption. <br /> Default is `"buttons"`. |
| `showOutsideDays` | `boolean`                                                | Display the days falling into the other months.                  |
| `fixedWeeks`      | `boolean`                                                | Display 6 weeks per months.                                      |
| `hideWeekdayRow`  | `boolean`                                                | Hide the row displaying the weekday names.                       |
| `footer`          | `ReactNode`                                              | Displays a footer below the calendar.                            |

## Caption Layout

Use the `captionLayout` prop to the layout of the caption used to navigate the calendar.

As default, DayPicker will show navigation buttons on the top corner.

```tsx
<DayPicker captionLayout="buttons" /> // Default value
```

### Dropdown Navigation

Use `dropdown` or `dropdown-buttons` to display a navigation dropdown.

:::warning

To use this prop, you need to set both `fromYear` and `toYear`. (This requirement will be removed in a next version.)

:::

```tsx
<DayPicker captionLayout="dropdown" fromYear={2010} toYear={2024} />
<DayPicker captionLayout="dropdown-buttons" fromYear={2010} toYear={2024} />
```

<BrowserWindow>
  <ExamplesV8.Dropdown />
</BrowserWindow>

### Outside Days

By default, DayPicker hides the days falling into the other months. Use `showOutsideDays` to display them.

```tsx
<DayPicker showOutsideDays />
```

<BrowserWindow>
  <ExamplesV8.OutsideDays />
</BrowserWindow>

### Fixed Weeks

In a year, months can have between 4 an 6 weeks. Use `fixedWeeks` with `showOutsideDays` to always display 6 weeks per month. This will prevent the grid changing its height while navigating the calendar.

:::note

In the current version, this prop requires `showOutsideDays` set to work. This
requirement will be removed in the next major version.

:::

```tsx
<DayPicker showOutsideDays fixedWeeks />
```

<BrowserWindow>
  <ExamplesV8.FixedWeeks />
</BrowserWindow>

## Multiple Months

To display multiple months in the calendar, use the `numberOfMonths` prop.

| Prop Name         | Type      | Description                                     |
| ----------------- | --------- | ----------------------------------------------- |
| `numberOfMonths`  | `number`  | The number of displayed months. Default is `1`. |
| `pagedNavigation` | `boolean` | Paginate the navigation.                        |
| `reverseMonths`   | `boolean` | Render multiple months in reversed order.       |

```tsx
<DayPicker numberOfMonths={2} />
```

<BrowserWindow>
  <ExamplesV8.MultipleMonths />
</BrowserWindow>

### Paged Navigation

With `pagedNavigation`, the navigation jumps by the specified number of months at time.

```tsx
<DayPicker numberOfMonths={2} pagedNavigation />
```

<BrowserWindow>
  <ExamplesV8.MultipleMonthsPaged />
</BrowserWindow>

## Week Numbers

To display the column with the week numbers, use the `showWeekNumber` prop. Use the `onWeekNumberClick` to handle the click event.

| Prop Name           | Type                          | Description                                    |
| ------------------- | ----------------------------- | ---------------------------------------------- |
| `showWeekNumber`    | `boolean`                     | Display the week numbers.                      |
| `onWeekNumberClick` | `WeekNumberClickEventHandler` | Event handler when the week number is clicked. |

```tsx
<DayPicker showWeekNumber onWeekNumberClick={setWeekNumber} />
```

<BrowserWindow>
  <ExamplesV8.Weeknumber />
</BrowserWindow>