Installing React Calendar

Overview

In this section, we will walk through the installation of React Calendar, which involves creating a new project directory, installing React 16.3 or later, and importing the Calendar component in the App.js file.

Installation Steps for React Calendar

React Calendar uses modern web technologies. That's why it's fast, lightweight, and easy to style. However, it comes at the cost of supporting only modern browsers.

1. Create a new project directory

   npx create-react-app my-app

2. In Visual Studio Code, open your desired terminal in your current project directory

   cd my-app

3. To install react-calendar

   npm install react-calendar

4. Run the following commands in order:

   npm start

4. In my-app/src/App.js import react-calendar

import Calendar from 'react-calendar'

return (
    <Calendar />
  );

Example of /App.js file:

import './App.css';
import Calendar from 'react-calendar'

function App() {
  return (
    <Calendar />
  );
}

export default App;

Everything you need to access/manipulate with React Calendar is going to be found on the Calendar Components props. You can find more about the interactivity and customization of your calendar here: Event Listeners, Styling

Conclusion

You should now have a working React Calendar in your React Application. Great work!