Matching days with modifiers

With modifiers you change the aspect of the day cells and customize the interaction with the calendar. When a modifier matches a specific day, its day cells receives the modifier’s name as CSS class.

In the following example, the highlighted modifier is used to paint the 19th of September with an orange background. Using the browser’s developer tools, note how that day receives a DayPicker-Day--highlighted CSS class.

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

const birthdayStyle = `.DayPicker-Day--highlighted {
  background-color: orange;
  color: white;
}`;

const modifiers = {
  highlighted: new Date(2018, 8, 19),
};

export default function MyBirthday() {
  return (
    <div>
      <style>{birthdayStyle}</style>
      <DayPicker modifiers={modifiers} month={new Date(2018, 8)} />
    </div>
  );
}

Modifers CSS classes are generated automatically to follow a BEM-like syntax. You can change the name of the classes using the classNames prop, or even use modifiers with CSS modules.

Type of modifiers

A modifier can be either:

• a Date object
  to match a specific day, as the example above

• a range object with from and to keys
  to match a range of days:

  const highlighted = { 
    from: new Date(2018, 0, 12), 
    to: new Date(2018, 0, 16) 
  }
  <DayPicker modifiers={ highlighted } />
  // .DayPicker-Day--highlighted

  will match the days between the 12th and the 16th of January.

• an object with a before and/or after key
  to match the days before and/or after the given date:

  const past = { 
    before: new Date(),
  }
  <DayPicker modifiers={ past } />
  // .DayPicker-Day--past

  The code above will match all the past the days (i.e. the days before today).

  const future = { 
    after: new Date(2018, 0, 1), 
  }
  <DayPicker modifiers={ future } />
  // .DayPicker-Day--future

  The code above will match all the days after the January, 1st 2018.

  const range = { 
    after: new Date(2020, 5, 20), 
    before: new Date(2020, 5, 30), 
  }
  <DayPicker modifiers={ range } />
  // .DayPicker-Day--range

  The code above will match all the days between the 30th and the 20th of April 2018.

• an object with a daysOfWeek array
  to match specific days of week:

  const weekends = { 
    daysOfWeek: [0, 6],
  }
  <DayPicker modifiers={ weekends } />
  // .DayPicker-Day--weekends

  will match all the Sundays (0) and Saturdays (6)

• a function taking the day as first argument and returning a boolean value:

  function sunday(day) {
    return day.getDay() === 0;
  }
  function firstOfMonth(day) {
    return day.getDate() === 1;
  }
  <DayPicker modifiers={ {sunday, firstOfMonth} } />
  // .DayPicker-Day--sunday, .DayPicker-Day--firstOfMonth

• an array of the above:

  <DayPicker modifiers={ [weekends, sunday, firstOfMonth] } />
  // .DayPicker-Day--weekends, .DayPicker-Day--sunday, .DayPicker-Day--firstOfMonth

Default modifiers

• --today is added to the today cell

• --outside is added for the day outside the month

Shortcuts for selected and disabled modifiers

Under the hood, the selectedDays and disabledDays props act as shortcut for the selected and a disabled modifiers. The following renders the same calendar:

function isFirstOfMonth(day) {
  return day.getDate() === 1;
}

<DayPicker disabledDays={ sundays } selectedDays={ isFirstOfMonth } />

<DayPicker 
  modifiers={ { 
    disabled: { daysOfWeek: [0] }, 
    selected: isFirstOfMonth 
  }} 
/>

Accessing modifiers from event handlers

Modifiers are passed as argument to the event handlers.

/* eslint-disable no-alert */
/* global window */

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default class EventHandlers extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.handleDayMouseEnter = this.handleDayMouseEnter.bind(this);
  }

  handleDayMouseEnter(day, { firstOfMonth }) {
    if (firstOfMonth) {
      // Do something when the first day of month has been mouse-entered
    }
  }

  handleDayClick(day, { sunday, disabled }) {
    if (sunday) {
      window.alert('Sunday has been clicked');
    }
    if (disabled) {
      window.alert('This day is disabled');
    }
  }

  render() {
    return (
      <DayPicker
        disabledDays={new Date()}
        modifiers={{
          sunday: day => day.getDay() === 0,
          firstOfMonth: day => day.getDate() === 1,
        }}
        onDayClick={this.handleDayClick}
        onDayMouseEnter={this.handleDayMouseEnter}
      />
    );
  }
}