Home page
Edit code

Add CSS modifiers to days

Style day cells using CSS modifiers and the modifiers prop.

.DayPicker-Day--birthday {
  color: white;
  background-color: #ffc107;
}

.DayPicker-Day--mondays:not(.DayPicker-Day--outside) {
  color: #ffc107;
  background-color: #fffdee;
}
import React from 'react';
import DayPicker from 'react-day-picker';

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

export default function Example() {
  const modifiers = {
    disabled: { daysOfWeek: [6] },
    birthday: new Date(2018, 8, 19),
    mondays: { daysOfWeek: [1] },
  };
  return <DayPicker month={new Date(2018, 8)} modifiers={modifiers} />;
}