Disabled Day(s)

Sometimes, you need to disallow user to select some specific days. disabledDays prop takes an array of desired disabled days:

PropTypes.arrayOf(PropTypes.shape({
  year: PropTypes.number.isRequired,
  month: PropTypes.number.isRequired,
  day: PropTypes.number.isRequired,
}))

By passing disabled days, users won't be able to select a disabled day or include one in a range. At such times, onDisabledDayErrorfunction will get called, and you can show a message to the users.

Examples

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import { Calendar } from "react-modern-calendar-datepicker";

const App = () => {
  const defaultValue = {
    year: 2019,
    month: 3,
    day: 12,
  };

  const disabledDays = [
    {
      year: 2019,
      month: 3,
      day: 20,
    },
    {
      year: 2019,
      month: 3,
      day: 21,
    },
    {
      year: 2019,
      month: 3,
      day: 7,
    }
  ];

  const [selectedDay, setSelectedDay] = useState(defaultValue);

  const handleDisabledSelect = disabledDay => {
    console.log('Tried selecting a disabled day', disabledDay);
  };

  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      disabledDays={disabledDays} // here we pass them
      onDisabledDayError={handleDisabledSelect} // handle error
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import { Calendar } from "react-modern-calendar-datepicker";

const App = () => {
  const defaultFrom = {
    year: 2019,
    month: 3,
    day: 12,
  };
  const defaultTo = {
    year: 2019,
    month: 3,
    day: 15,
  };

  const disabledDays = [
    {
      year: 2019,
      month: 3,
      day: 22,
    },
    {
      year: 2019,
      month: 3,
      day: 25,
    },
    {
      year: 2019,
      month: 3,
      day: 6,
    }
  ];

  const [selectedDayRange, setSelectedDayRange] = useState({
    from: defaultFrom,
    to: defaultTo,
  });

  const handleDisabledSelect = disabledDay => {
    console.log('Tried including a disabled day', disabledDay);
  };

  return (
    <Calendar
      value={selectedDayRange}
      onChange={setSelectedDayRange}
      disabledDays={disabledDays} // here we pass them
      onDisabledDayError={handleDisabledSelect} // handle error
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS