How to create Calendar in ReactJS ?

In this article, we are going to learn how we can create calendars in ReactJS. You can use this calendar in your to-do list, e-commerce site, Ticket booking site, and many more apps.

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

Approach: To create our calendar we are going to see 2 different methods. In the first method, we will see how we can create a simple calendar without any styling and In the second method, we will also add some styling to our calendar to make it more attractive.

Create ReactJs Application: You can create a new ReactJs project using the below command:

npx create-react-app gfg  

Project Structure: It will look like this.

Example 1: In this example, we are going to create a very simple calendar without any styling. So for this, we are going to install a new npm package. Run the below code in your terminal to install the package.

npm i @natscale/react-calendar

Now we are going to add the calendar to our homepage. For this, add the below code in your App.js file.

App.js

import React, { useState, useCallback } from 'react';
import { Calendar } from '@natscale/react-calendar';

export default function CalendarGfg() {
  const [value, setValue] = useState();

  const onChange = useCallback(
    (value) => {
      setValue(value);
    },
    [setValue],
  );

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

Explanation: In the above file, we are first importing our Calendar from the package that we installed. After that, we are using the useState() hook to create and set values on the onChange function. Then we are returning our Calendar.

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output:

Example 2: In this example, we are going to create a very calendar with some styling. So for this, we are going to install a new npm package. Run the below code in your terminal to install the package.

npm i react-calendar

Now we are going to add the calendar to our homepage. For this, add the below code in your App.js file.

App.js

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function CalendarGfg() {
  const [value, onChange] = useState(new Date());

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

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output: