How to create Calendar in ReactJS ?

Creating a calendar in React JS can help in React projects like to-do lists, e-commerce sites, Ticket booking sites, and many more apps. It visualizes the day, month, and year data and makes an interacting User interface.

Prerequisites

• React JS
• Node.js & NPM

To create a calendar in React JS we will be using these approaches

Steps to create React Application

Step 1: You can create a new ReactJs project using the below command:

npx create-react-app gfg  

Project Structure

Approach 1: Using @natscale/react-calendar

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

The updated dependencies in package.json will look like

{
    "dependencies": {
        "@natscale/react-calendar": "^0.0.0-beta.26",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: Import and use the calender component from the installed library with useState variable to store values.

// Filename - 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>
    );
}

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

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.

Approach 2: Using react-calendar

Using React-calender we can create a calender with some basic stylings. Run below command to install the react-calender package.

npm i react-calendar

The updated dependencies in package.json will look like

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-calendar": "^4.6.1",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: Create a Calender with importing some basic styling provided by the library.

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: This output will be visible on the http://localhost:3000/ on the browser window.