How to add Calendar in Next.js ?
Last Updated :
29 Jul, 2024
Adding a calendar to a Next.js application enhances scheduling and event management. We can just install and use the available npm package. In this article, we are going to learn how we can add a calendar loader in NextJS.
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.
Steps to Create Next App and Installing Module
Step 1: Create a React application using the following command.
npx create-next-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:

The updated dependencies in the package.json file are:
"dependencies": {
"next": "14.2.4",
"react": "^18",
"react-calendar": "^5.0.0",
"react-dom": "^18"
}
Adding the Calendar
After installing the package we can easily add a calendar on any page in our app.
Example: This example demonstrate addin calender by importing calendar component from the react-calendar package.
JavaScript
// Filename - 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: