Recipes

Display simple calendar

import React, { useState } from 'react';
import Calendar from 'react-calendar';

function MyApp() {
  const [value, setValue] = useState(new Date());

  function onChange(nextValue) {
    setValue(nextValue);
  }

  return (
    <Calendar
      onChange={onChange}
      value={value}
    />
  );
}

Selectively disable dates

import React, { useState } from 'react';
import Calendar from 'react-calendar';

const disabledDates = [tomorrow, in3Days, in5Days];

function tileDisabled({ date, view }) {
  // Disable tiles in month view only
  if (view === 'month') {
    // Check if a date React-Calendar wants to check is on the list of disabled dates
    return disabledDates.find(dDate => isSameDay(dDate, date));
  }
}

function MyApp() {
  const [value, setValue] = useState(new Date());

  return (
    <Calendar
      onChange={onChange}
      value={date}
      tileDisabled={tileDisabled}
    />
  );
}

The way you compare dates (isSameDay) is up to you. For example, you can use date-fns:

import { differenceInCalendarDays } from 'date-fns';

function isSameDay(a, b) {
  return differenceInCalendarDays(a, b) === 0;
}