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 tiles

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

If you need to support a dynamic list of disabled dates, you can move tileDisabled function to MyApp function body. Use useCallback for optimal performance and update tileDisabled function only if necessary.

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

Disable date ranges

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

const disabledRanges = [
  [in3Days, in5Days],
  [in13Days, in15Days],
];

function tileDisabled({ date, view }) {
  // Add class to tiles in month view only
  if (view === 'month') {
    // Check if a date React-Calendar wants to check is within any of the ranges
    return isWithinRanges(date, disabledRanges);
  }
}

function MyApp() {
  const [date, onChange] = useState(now);

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

If you need to support a dynamic list of disabled dates, you can move tileDisabled function to MyApp function body. Use useCallback for optimal performance and update tileDisabled function only if necessary.

The way you check if the date is within given ranges (isWithinRanges) is up to you. For example, you can use date-fns:

import { isWithinInterval } from "date-fns";

function isWithinRange(date, range) {
  return isWithinInterval(date, { start: range[0], end: range[1] });
}

function isWithinRanges(date, ranges) {
  return ranges.some(range => isWithinRange(date, range));
}

Selectively style tiles

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

const datesToAddClassTo = [tomorrow, in3Days, in5Days];

function tileClassName({ date, view }) {
  // Add class to tiles in month view only
  if (view === 'month') {
    // Check if a date React-Calendar wants to check is on the list of dates to add class to
    if (datesToAddClassTo.find(dDate => isSameDay(dDate, date))) {
      return 'myClassName';
    }
  }
}

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

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

If you need to support a dynamic list of dates, you can move tileClassName function to MyApp function body. Use useCallback for optimal performance and update tileClassName function only if necessary.

Selectively add content to tiles

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

const datesToAddContentTo = [tomorrow, in3Days, in5Days];

function tileContent({ date, view }) {
  // Add class to tiles in month view only
  if (view === 'month') {
    // Check if a date React-Calendar wants to check is on the list of dates to add class to
    if (datesToAddContentTo.find(dDate => isSameDay(dDate, date))) {
      return 'My content';
    }
  }
}

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

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

If you need to support a dynamic list of dates, you can move tileContent function to MyApp function body. Use useCallback for optimal performance and update tileContent function only if necessary.