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.

Minimal demo page is included in sample directory.

Online demo is also available!

React-Calendar is under constant development. This documentation is written for React-Calendar 3.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:

• v2.x

Your project needs to use React 16.3 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.

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 React, { Component } from 'react';
import Calendar from 'react-calendar';

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
        />
      </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 don't want to use default React-Calendar styling to build upon it, you can import React-Calendar by using:

// using ES6 modules
import Calendar from 'react-calendar/dist/esm/entry.nostyle';

// using CommonJS modules
import Calendar from 'react-calendar/dist/umd/entry.nostyle';

instead.

Displays a complete, interactive calendar.

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

The MIT License.

Wojciech Maj [email protected] http://wojtekmaj.pl

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!