Registry / web-framework / react-calendar

react-calendar

library6.0.1jsnpmunverified

React Calendar is a highly customizable and internationalization-friendly date picker component for React applications. Currently stable at version 6.0.1, it receives frequent updates that include new features, bug fixes, and performance improvements. It leverages modern React features like the new JSX transform and is distributed exclusively as an ES module since version 6.0.0. Key differentiators include its robust TypeScript support, extensibility through props like `tileClassName` and `tileContent`, and recent adoption of npm trusted publishing and immutable releases for enhanced supply chain security, aiming to improve overall supply chain security and reliability for users.

web-framework crm-productivity

npm install react-calendar

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-CALENDAR

react-calendar

web-frameworkjavascriptv6.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Calendar

✓ import Calendar from 'react-calendar';

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

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

CalendarType

✓ import { CalendarType } from 'react-calendar';

✗ import CalendarType from 'react-calendar';

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

TileArgs

✓ import { TileArgs } from 'react-calendar';

✗ 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.

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;

Debug

Known issues

breakingThe 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`).

affects: >=6.0.0

breakingThe 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.

affects: >=5.0.0

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.

affects: >=5.0.0

gotchaOld 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.

affects: >=4.4.0

gotchaWhen 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.

affects: >=6.0.0

Errors

Common errors & fixes

TypeError: get format called on incompatible undefined

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()

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

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'

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.

Upgrade

Version history

6.0.1latest on npm

Audit

Dependencies

reactrequiredCore React library required for component rendering.

react-domrequiredRequired for rendering React components into the DOM.

@types/reactoptionalTypeScript type definitions for React; useful for TypeScript projects.

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/wojtekmaj/react-calendar ↗

packagehttps://www.npmjs.com/package/react-calendar ↗

homepagehttps://projects.wojtekmaj.pl/react-calendar/ ↗