How to create Calendar in ReactJS ?
Last Updated :
02 Nov, 2023
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
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.
Javascript
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.
Javascript
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...