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

Code


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

Result


September 2018
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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.

Code


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

Result


December 2017
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31