¿Cómo agregar Calendario en NextJS?

En este artículo, vamos a aprender cómo podemos agregar un cargador de calendario en NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Enfoque: Para agregar nuestro calendario vamos a usar el paquete react-calendar. El paquete react-calendar nos ayuda a integrar calendarios en nuestra aplicación. Primero, instalaremos el paquete react-calendar y luego agregaremos un calendario en nuestra página de inicio.

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app gfg

Paso 2: después de crear la carpeta de su proyecto, es decir, gfg, acceda a ella con el siguiente comando.

cd gfg

Paso 3: ahora instalaremos el paquete react-calendar usando el siguiente comando

npm i react-calendar

Estructura del proyecto: Se verá así.

Agregar el calendario: después de instalar el paquete, podemos agregar fácilmente un calendario en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar un calendario a nuestra página de inicio.

Ejemplo:

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>
    );
}

En el ejemplo anterior, primero estamos importando el componente Calendario y luego estamos usando el enlace useState para almacenar la fecha actual. Luego estamos agregando nuestro calendario usando el componente importado. 

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: