website/docs/guides/custom-modifiers.mdx

---
sidebar_position: 3
---

# Custom Modifiers {#custom-modifiers}

In DayPicker, a **custom modifier** is added to a day when the day matches a specific condition, called a [`Matcher`](../api/type-aliases/Matcher.md).

Modifiers are set using the `modifiers` prop. When a date matches a modifier, the modifier is passed to the `onSelect` event and other [DayEventHandler](../api/type-aliases/DayEventHandler.md) events (`onDayClick`, etc.) to inspect the days the user has interacted with.

For example, you can use a custom modifier to mark days as already booked in a booking app:

```tsx
<DayPicker
  modifiers={{
    booked: [
      new Date(2022, 5, 8),
      new Date(2022, 5, 9),
      new Date(2022, 5, 10),
      { from: new Date(2022, 5, 15), to: new Date(2022, 5, 20) },
    ],
  }}
  onDayClick={(date, modifiers) => {
    if (modifiers.booked) {
      alert("This day is already booked.");
    }
  }}
/>
```

## Understanding Modifiers

- Use modifiers to change the appearance of days in the calendar or to inspect the days the user has interacted with (e.g., picking a day).
- DayPicker comes with some [pre-built modifiers](../api/type-aliases/Modifiers.md), such as `disabled`, `selected`, `hidden`, `today`, `range_start`, etc., designed to cover the most common use cases.
- You can implement custom modifiers to extend the behavior of DayPicker. See the examples below for more details.

## Built-in Modifiers

### `selected` Modifier

```tsx
<DayPicker selected={new Date()} />
```

In selection mode, use the `selected` prop to add the `selected` modifier to the selected dates and style them accordingly. For more details on implementing the `selected` modifier, see the [Selecting Days guide](../selections/selection-modes.mdx).

### `disabled` Modifier

Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers to specify the disabled days:

```tsx
// Disable Sundays and Saturdays
<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
```

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersDisabled.tsx">
  <Examples.ModifiersDisabled />
</BrowserWindow>

### `hidden` Modifier

The `hidden` modifier removes a day from the calendar. Use the `hidden` prop to specify the days to be hidden:

```tsx
const hiddenDays = [
  new Date(2022, 5, 10),
  new Date(2022, 5, 20),
  new Date(2022, 5, 11),
];

<DayPicker defaultMonth={hiddenDays[0]} hidden={hiddenDays} />;
```

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersHidden.tsx">
  <Examples.ModifiersHidden />
</BrowserWindow>

### `today` Modifier

The `today` modifier is a special modifier applied to the current date. You can change the current date using the `today` prop:

```tsx
function Example() {
  const handleDayClick: DayMouseEventHandler = (day, modifiers) => {
    if (modifiers.today) {
      alert("You clicked the today’s date.");
    }
  };
  return (
    <DayPicker onDayClick={handleDayClick} today={new Date(2019, 12, 22)} />
  );
}
```

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersToday.tsx">
  <Examples.ModifiersToday />
</BrowserWindow>

## Styling Modifiers

A day can be styled based on its modifiers using CSS or inline styles. For more details, see [Styling DayPicker](../docs/styling.mdx).

```tsx
const bookedDays = [
  new Date(2021, 5, 8),
  new Date(2021, 5, 9),
  new Date(2021, 5, 11),
];
export function ModifiersWithClassnames() {
  return (
    <DayPicker
      defaultMonth={bookedDays[0]}
      modifiers={{
        booked: bookedDays,
      }}
      modifiersClassNames={{
        booked: "my-booked-class",
      }}
    />
  );
}
```

Add the `my-booked-class` class to your CSS:

```postcss
.my-booked-class {
  background-color: tomato;
  color: white;
  border-radius: 50%;
}
```

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersClassnames.tsx">
  <Examples.ModifiersClassnames />
</BrowserWindow>