Custom Modifiers

In DayPicker, a custom modifier is added to a day when the day matches a specific condition, called a Matcher.

Modifiers are set using the modifiers prop. When a date matches a modifier, the modifier is passed to the onSelect event and other DayEventHandler 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.

<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, 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 Custom Modifiers below for more details.

Built-in Modifiers

selected Modifier

<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.

disabled Modifier

Use the disabled modifier to disable one or more days. Pass a Matcher or an array of matchers to specify the disabled days:

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

hidden Modifier

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

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

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

today Modifier

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

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

Styling Modifiers

A day can be styled based on its modifiers using CSS or inline styles. For more details, see Styling DayPicker.

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:

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