Skip to content
Related Articles

Related Articles

How to add Calendar in NextJS ?

Improve Article
Save Article
Like Article
  • Last Updated : 15 Dec, 2021

In this article, we are going to learn how we can add a calendar loader in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Approach: To add our calendar we are going to use the react-calendar package. The react-calendar package helps us to integrate calendars in our app. So first, we will install the react-calendar package and then we will add a calendar on our homepage.

Step 1: Create a React application using the following command.

npx create-react-app gfg

Step 2: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

 

Step 3: Now we will install the react-calendar package using the below command

npm i react-calendar

Project Structure: It will look like this.

Project structure

Adding the Calendar: After installing the package we can easily add a calendar on any page in our app. For this example, we are going to add a calendar to our homepage.

Example:

index.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>NextJs Calendar - GeeksforGeeks</h1>
            <Calendar
                onChange={onChange}
                value={value}
            />
        </div>
    );
}

In the above example first, we are importing the Calendar component and after that, we are using the useState hook to store the current date. Then we are adding our calendar using the imported component. 

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

npm run dev

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!