explaingit

wojtekmaj/react-calendar

★ 3,783TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A React calendar component that lets users pick single dates or date ranges, with multi-language support and no moment.js dependency, drop it in with npm and pass an onChange callback.

Mindmap

mindmap
  root((react-calendar))
    What it does
      Date selection
      Range selection
      Multi-level view
    View Levels
      Day
      Month
      Year
      Decade
    Features
      Internationalization
      No moment.js
      Custom styling
    Integration
      npm install
      onChange prop
      Optional CSS
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a date picker to a React app that lets users select a single day, month, year, or a date range.

USE CASE 2

Build a booking or scheduling form where users can choose a start and end date without relying on heavy date libraries.

USE CASE 3

Display a localized calendar in multiple languages using the browser's built-in internationalization support.

Tech stack

TypeScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

Requires React 16.8 or newer, older browsers may need a polyfill for the native internationalization API.

License terms are not described in the explanation.

In plain English

react-calendar is a calendar component for React applications. React is a JavaScript library for building user interfaces, and react-calendar plugs in as a reusable piece that displays and handles date selection. The component handles several levels of date picking: you can let users select a specific day, a month, a year, or even a decade. It also supports range selection, meaning users can click a start date and an end date to select a span of time. It supports many languages through built-in internationalization and does not require the moment.js date library, which is a common external dependency that can add significant size to a web project. Installation is straightforward: run npm install react-calendar and then drop the Calendar component into your React tree. By default it shows a monthly view with navigation controls for moving between months and years. You pass a callback via the onChange prop to receive the selected date or range. Optional default styling is available as an importable CSS file, and you can build custom styles on top of it. The project documentation is written for version 4.x. Earlier versions had different APIs and are documented on separate branches. The component requires React 16.8 or newer and targets modern browsers that support the browser-native internationalization API. For older browsers or locales that are not supported natively, polyfills are available. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1
Add react-calendar to my React app so users can pick a single date and I receive it in an onChange handler. Show me the full component code.
Prompt 2
Implement a date range picker using react-calendar where a user selects a check-in and check-out date for a booking form.
Prompt 3
Style react-calendar to match my app's design by overriding the default CSS. Show me which CSS classes to target.
Prompt 4
Set up react-calendar in French so the month names and weekday headers display in French without installing moment.js.
Open on GitHub → Explain another repo

← wojtekmaj on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.