React Big Calendar

!Hey Coders! En este tutorial, vamos a aprender como añadir calendarios en React de forma rapida, y con caracteriticas ya hechas, desde una biblioteca llamada React Big Calendar, una potente biblioteca de React diseñada para la creación de calendarios interactivos y personalizables en aplicaciones web. Si alguna vez has necesitado incorporar una visualización intuitiva y eficiente de eventos en tu proyecto React, estás en el lugar adecuado.

React Big Calendar ofrece una amplia gama de características, desde la visualización de eventos en distintas escalas de tiempo hasta la capacidad de arrastrar y soltar eventos para una gestión flexible. A lo largo de este tutorial, aprenderemos a integrar esta biblioteca en nuestras aplicaciones, personalizar su apariencia, y aprovechar al máximo sus funciones avanzadas.

Ya sea que estés construyendo una aplicación de programación, un sistema de reservas o simplemente necesites un calendario interactivo, React Big Calendar se presenta como una herramienta valiosa que simplificará el proceso de implementación. ¡Prepárate para sumergirte en el desarrollo de calendarios dinámicos y eficientes con React Big Calendar!

¿Qué es React Big Calendar?

React Big Calendar es una biblioteca de React que proporciona componentes flexibles y personalizables para la visualización y gestión de eventos en un calendario. Permite a los desarrolladores integrar fácilmente funciones de calendario avanzadas en sus aplicaciones web basadas en React, ofreciendo una experiencia de usuario rica y interactiva.

React Big Calendar ofrece varias características clave, entre las que destacan:

• Vista de Mes, Semana y Día: Permite mostrar eventos en diferentes escalas de tiempo para adaptarse a las necesidades del usuario.

• Arrastrar y Soltar: Permite a los usuarios arrastrar y soltar eventos para actualizar fácilmente su fecha y hora.

• Redimensionamiento de Eventos: Los eventos se pueden redimensionar para ajustar su duración directamente desde el calendario.

• Soporte para Eventos Recurrentes: Permite la creación y visualización de eventos que se repiten en un patrón específico.

• Personalización: Proporciona opciones para personalizar la apariencia y el estilo del calendario y de los eventos.

• Interactividad: Ofrece una experiencia interactiva al hacer clic en eventos para ver más detalles o interactuar con ellos.

• Compatibilidad con biblioteca de Fechas en Javascript: React big calendar puede funcionar junto a otras biblioteca UI como momentjs, dayjs o date-fns para el manejo eficiente de fechas y horas.

• Internacionalización: Admite la internacionalización para adaptarse a diferentes idiomas y regiones.

• Manejo de Estado: Facilita el manejo del estado del calendario y de los eventos dentro de la aplicación React.

• Ampliable: Permite la incorporación de plugins y extensiones para ampliar sus funcionalidades.

Instalación de React Big Calendar

npm create vite

npm i

npm i react-big-calendar

Inicializacion

import { Calendar, dayjsLocalizer } from "react-big-calendar";
import dayjs from "dayjs";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = dayjsLocalizer(dayjs);

function App() {
  return (
    <div style={{ height: "95vh" }}>
      <Calendar localizer={localizer} style={{ height: 500, width: 800 }} />
    </div>
  );
}

export default App;

Events

Esta es una lista de los eventos que podemos programar:

import { Calendar, dayjsLocalizer } from "react-big-calendar";
import dayjs from "dayjs";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = dayjsLocalizer(dayjs);

function App() {
  const events = [
    {
      start: dayjs("2023-12-18T12:00:00.00").toDate(),
      end: dayjs("2023-12-18T13:00:00.00").toDate(),
      title: "My event",
    },
    {
      start: dayjs("2023-12-19T12:00:00.00").toDate(),
      end: dayjs("2023-12-19T13:00:00.00").toDate(),
      title: "My event 2",
    },
  ];

  console.log(events);

  return (
    <div style={{ height: "95vh" }}>
      <Calendar
        localizer={localizer}
        style={{ height: 500, width: 800 }}
        events={events}
      />
    </div>
  );
}

export default App;

Props

Este te permite seleccionar el valor actual

view={'week'}

Este te permite seleccionar el valor por defecto

defaultView={'day'}

Este te permite seleccioanr todas las vistas que necesites:

views={["month", "week", "day"]}

para escoger el dia inicial del calendario:

    date={dayjs("2023-12-23T12:00:00.00").toDate()}

Ocultar Toolbar

toolbar={false}
defaultView="week"

Date Range

Puedes mostar eventos basado en un rango maximo y minimo

min={dayjs("2023-12-23T10:00:00.00").toDate()}
max={dayjs("2023-12-23T18:00:00.00").toDate()}

Date Formats

formats={{
  dayHeaderFormat: (date) => dayjs(date).format("dddd @ DD/MM"),
}}

components

  const components = {
    event: (props) => {
      const { data } = props.event;
      console.log(data);

      if (data.x > 15) {
        console.log("tes")
        return <div style={{ background: "red" }}>{props.title}</div>;
      } else {
        return <div style={{ backgroundColor: "green" }}>{props.title}</div>;
      }
    },
  };


components={components}