React Calendar Component

Common errors

• TypeError: get format called on incompatible undefined

  cause An internal date formatting issue occurred in certain browser environments.
  fix Upgrade `react-calendar` to version 6.0.1 or newer, which includes a fix for this specific TypeError.

• require() of ES Module ... not supported. Instead change the require of index.js to a dynamic import()

  cause Attempting to import `react-calendar` using CommonJS `require()` syntax after it transitioned to an ESM-only package.
  fix Change all instances of `const Calendar = require('react-calendar');` to `import Calendar from 'react-calendar';` and ensure your project's build environment supports ESM.

• 'React' must be in scope when using JSX

  cause The project's build configuration is not set up to use the new JSX transform, which no longer requires explicit `import React from 'react'` in every file.
  fix Enable the automatic JSX runtime in your Babel configuration (e.g., `"plugins": [["@babel/plugin-transform-react-jsx", {"runtime": "automatic"}]]`) or TypeScript `tsconfig.json` (`"jsx": "react-jsx"`).

• Property 'propTypes' does not exist on type 'typeof Calendar'

  cause Attempting to access or define `propTypes` on the `Calendar` component after `react-calendar` removed them.
  fix Remove any `propTypes` definitions or checks related to `react-calendar`. For type safety, use TypeScript or a separate runtime validation library.

Warnings

• breaking The package is now ESM-only. CommonJS (`require`) builds have been dropped completely.
  Fix: Use ES module import syntax (`import/export`) exclusively. For Jest, consider migrating to Vitest or configuring Jest for ESM support (e.g., using `esm-loader` or `transform`).
• breaking The new JSX transform for React is now a strict requirement.
  Fix: Ensure your build tools (e.g., Babel with `@babel/plugin-transform-react-jsx` or TypeScript with `jsx: react-jsx`) are configured to use the new JSX transform.
• breaking `propTypes` have been entirely removed from the component.
  Fix: Remove any usage of `propTypes` with `react-calendar`. Migrate to TypeScript for static type checking or use a runtime validation library like Zod or Joi if runtime validation is necessary.
• gotcha Old values for the `calendarType` prop will be deprecated in future releases.
  Fix: Review the documentation and update `calendarType` values to conform to `Intl.Locale.calendar` standards to ensure future compatibility.
• gotcha When using Jest for unit testing, you may encounter issues due to the package becoming ESM-only since v6.
  Fix: Consider migrating your testing setup to Vitest, which has native ESM support. Alternatively, configure Jest to handle ESM modules, which often involves using experimental features or specific transformers.

Install

• npm install react-calendar npm
• yarn add react-calendar yarn
• pnpm add react-calendar pnpm

Imports

• Calendar
  wrong:

  const Calendar = require('react-calendar');

  correct:

  import Calendar from 'react-calendar';

  Default import for the main component. CommonJS (require) is not supported since v6.0.0, which is ESM-only.
• CalendarType
  wrong:

  import CalendarType from 'react-calendar';

  correct:

  import { CalendarType } from 'react-calendar';

  Named export for the `CalendarType` string literal type, used for calendar customization. Available since v5.1.0.
• TileArgs
  wrong:

  import TileArgs from 'react-calendar';

  correct:

  import { TileArgs } from 'react-calendar';

  Named export for the `TileArgs` type, useful for custom tile rendering functions like `tileClassName` or `tileContent`. Available since v4.6.1.

Quickstart

Demonstrates a basic interactive calendar with state management for date selection, supporting both single date and range selection.

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyCalendar() {
  const [value, onChange] = useState<Value>(new Date());

  return (
    <div className="my-calendar-container">
      <h1>Select a Date</h1>
      <Calendar onChange={onChange} value={value} />
      {value instanceof Date && value && (
        <p>Selected date: {value.toLocaleDateString()}</p>
      )}
      {Array.isArray(value) && value[0] instanceof Date && value[1] instanceof Date && (
        <p>Selected range: {value[0].toLocaleDateString()} - {value[1].toLocaleDateString()}</p>
      )}
    </div>
  );
}

export default MyCalendar;