{"id":15174,"library":"react-calendar","title":"React Calendar Component","description":"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.","status":"active","version":"6.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/wojtekmaj/react-calendar","tags":["javascript","calendar","date","date-picker","month-picker","react","typescript"],"install":[{"cmd":"npm install react-calendar","lang":"bash","label":"npm"},{"cmd":"yarn add react-calendar","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-calendar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library required for component rendering.","package":"react","optional":false},{"reason":"Required for rendering React components into the DOM.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React; useful for TypeScript projects.","package":"@types/react","optional":true}],"imports":[{"note":"Default import for the main component. CommonJS (require) is not supported since v6.0.0, which is ESM-only.","wrong":"const Calendar = require('react-calendar');","symbol":"Calendar","correct":"import Calendar from 'react-calendar';"},{"note":"Named export for the `CalendarType` string literal type, used for calendar customization. Available since v5.1.0.","wrong":"import CalendarType from 'react-calendar';","symbol":"CalendarType","correct":"import { CalendarType } from 'react-calendar';"},{"note":"Named export for the `TileArgs` type, useful for custom tile rendering functions like `tileClassName` or `tileContent`. Available since v4.6.1.","wrong":"import TileArgs from 'react-calendar';","symbol":"TileArgs","correct":"import { TileArgs } from 'react-calendar';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport Calendar from 'react-calendar';\nimport 'react-calendar/dist/Calendar.css';\n\ntype ValuePiece = Date | null;\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nfunction MyCalendar() {\n const [value, onChange] = useState(new Date());\n\n return (\n
\n

Select a Date

\n \n {value instanceof Date && value && (\n

Selected date: {value.toLocaleDateString()}

\n )}\n {Array.isArray(value) && value[0] instanceof Date && value[1] instanceof Date && (\n

Selected range: {value[0].toLocaleDateString()} - {value[1].toLocaleDateString()}

\n )}\n
\n );\n}\n\nexport default MyCalendar;","lang":"typescript","description":"Demonstrates a basic interactive calendar with state management for date selection, supporting both single date and range selection."},"warnings":[{"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`).","message":"The package is now ESM-only. CommonJS (`require`) builds have been dropped completely.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"The new JSX transform for React is now a strict requirement.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"`propTypes` have been entirely removed from the component.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Review the documentation and update `calendarType` values to conform to `Intl.Locale.calendar` standards to ensure future compatibility.","message":"Old values for the `calendarType` prop will be deprecated in future releases.","severity":"gotcha","affected_versions":">=4.4.0"},{"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.","message":"When using Jest for unit testing, you may encounter issues due to the package becoming ESM-only since v6.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade `react-calendar` to version 6.0.1 or newer, which includes a fix for this specific TypeError.","cause":"An internal date formatting issue occurred in certain browser environments.","error":"TypeError: get format called on incompatible undefined"},{"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.","cause":"Attempting to import `react-calendar` using CommonJS `require()` syntax after it transitioned to an ESM-only package.","error":"require() of ES Module ... not supported. Instead change the require of index.js to a dynamic import()"},{"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\"`).","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.","error":"'React' must be in scope when using JSX"},{"fix":"Remove any `propTypes` definitions or checks related to `react-calendar`. For type safety, use TypeScript or a separate runtime validation library.","cause":"Attempting to access or define `propTypes` on the `Calendar` component after `react-calendar` removed them.","error":"Property 'propTypes' does not exist on type 'typeof Calendar'"}],"ecosystem":"npm"}