Ultimate calendar for your React app.

• Pick days, months, years, or even decades
• Supports range selection
• Supports virtually any language
• No moment.js needed

• Install by executing npm install react-calendar or yarn add react-calendar.
• Import by adding import Calendar from 'react-calendar'.
• Use by adding <Calendar />. Use onChange prop for getting new values.

A minimal demo page can be found in sample directory.

Online demo is also available!

react-calendar is under constant development. This documentation is written for react-calendar 4.x branch. If you want to see documentation for other versions of react-calendar, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:

• v3.x
• v2.x

Your project needs to use React 16.8 or later.

react-calendar uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers.

If you need to support legacy browsers like Internet Explorer 10, you will need to use Intl.js or another Intl polyfill along with react-calendar.

If your locale isn't supported, you can use Intl.js or another Intl polyfill along with react-calendar.

Add react-calendar to your project by executing npm install react-calendar or yarn add react-calendar.

Here's an example of basic usage:

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

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

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

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

Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in react-calendar Wiki.

If you want to use default react-calendar styling to build upon it, you can import react-calendar's styles by using:

import 'react-calendar/dist/Calendar.css';

Displays a complete, interactive calendar.

Displays a given month, year, decade and a century, respectively.

• react-calendar Wiki

The MIT License.

Wojciech Maj

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Thank you to all our contributors that helped on this project!