How to create Calendar in ReactJS ?

29 Oct, 2021
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
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
React-Questions
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components