How to usereact-calendar in ReactJS
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 - w3wiki</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.
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.