¿Cómo crear un calendario en ReactJS?

En este artículo, vamos a aprender cómo podemos crear calendarios en ReactJS. Puede usar este calendario en su lista de tareas, sitio de comercio electrónico, sitio de reserva de boletos y muchas más aplicaciones.

React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Planteamiento: Para crear nuestro calendario vamos a ver 2 métodos diferentes. En el primer método, veremos cómo podemos crear un calendario simple sin ningún estilo y en el segundo método, también agregaremos algunos estilos a nuestro calendario para hacerlo más atractivo.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg  

Estructura del proyecto: Se verá así.

Ejemplo 1: En este ejemplo, vamos a crear un calendario muy simple sin ningún tipo de estilo. Entonces, para esto, vamos a instalar un nuevo paquete npm. Ejecute el siguiente código en su terminal para instalar el paquete.

npm i @natscale/react-calendar

Ahora vamos a agregar el calendario a nuestra página de inicio. Para esto, agregue el siguiente código en su archivo App.js.

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

Explicación: En el archivo anterior, primero estamos importando nuestro Calendario desde el paquete que instalamos. Después de eso, estamos usando el enlace useState() para crear y establecer valores en la función onChange. Entonces estamos devolviendo nuestro Calendario.

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

npm start

Producción:

Ejemplo 2: En este ejemplo, vamos a crear un calendario con algunos estilos. Entonces, para esto, vamos a instalar un nuevo paquete npm. Ejecute el siguiente código en su terminal para instalar el paquete.

npm i react-calendar

Ahora vamos a agregar el calendario a nuestra página de inicio. Para esto, agregue el siguiente código en su archivo App.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>Calendar - GeeksforGeeks</h1>
      <Calendar
        onChange={onChange}
        value={value}
      />
    </div>
  );
}

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

npm start

Producción: