How to use@natscale/react-calendar in ReactJS
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
// Filename - App.jsimport 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 - w3wiki</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.
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.