Programador de año completo personalizable en React

Un componente React de código abierto diseñado para proporcionar una solución de calendario anual simple, personalizable y fácil de usar para individuos y organizaciones por igual.

Nacido de la necesidad de una herramienta de calendario más flexible y accesible, React Full Year Scheduler es perfecto para diversos fines, como planificar eventos, realizar un seguimiento de plazos y programar citas.

El componente ofrece una vista completa del año, lo que facilita la visualización y gestión de su calendario anual. Centrándose en la personalización y la accesibilidad, le permite establecer días festivos y laborables, resaltar y diseñar eventos con diferentes colores y crear un diseño de calendario adaptado a sus necesidades específicas. React Full Year Scheduler no tiene dependencias externas aparte de Day.js y TailwindCSS, lo que garantiza una integración fluida en sus proyectos.

Cómo usarlo:

1. Instalación.

# NPM
$ npm i react-full-year-scheduler

2. Importe los módulos necesarios.

import dayjs from “dayjs”;
import { useState } from “react”;
import { ReactFullYearScheduler } from “react-full-year-scheduler”;
import “react-full-year-scheduler/dist/style.css”;

3. Agregue sus eventos al programador.

function  App() {
  const [events, setEvents] =  useState<TEvent[]>([
  {
    eventName: "Event 1",
    startDate: dayjs("2023-04-01"),
    endDate: dayjs("2023-04-15"),
    eventBgColor: "#ff5f4c",
    eventTextColor: "white",
  },
  {
    eventName: "Event 2",
    startDate: dayjs("2023-04-16"),
    endDate: dayjs("2023-04-30"),
    eventBgColor: "purple",
    eventTextColor: "white",
  },
  // ... more events here
]);

4. Agregue el ReactFullYearSchedulercomponente a la aplicación.

<ReactFullYearScheduler
  events={events}
  locale="en"
  dateTooltipTheme="material"
  weekSeparatorWidth={10}
  weekSeparatorColor="white"
  headerWeekDayBgColor="#b39cd0"
  headerWeekendBgColor="rgba(75, 68, 83, 0.69)"
  weekendCellBackgroundColor="rgba(75, 68, 83, 0.69)"
  weekendCellTextColor="white"
  weekDayCellBackgroundColor="rgba(75, 68, 83, 0.69)"
  weekDayCellTextColor="white"
  selectionColor="black"
  selectionTextColor="white"
  maxRangeSelection={20}
  minRangeSelection={10}
  firstDayOfWeek="Monday"
  maxYear={2030}
  minYear={1970}
  readonlyCalendar={false}
  showWeekSeparator={true}
  showTodayButton={true}
  enableYearToYearSelection={false}
  enableWeekendSelection={true}
  minCellWidth={50}
  showSeparatorInHeader={false}
  enableEventOverwriting={true}
  onDatePick={(eventDate, clearSelectedCell) => {
  console.log(eventDate.toDate());
  }}
  onEventSinglePickInterception={(date, eventName, clearSelectedCell) => {
  console.table([eventName, date.toDate()]);
  }}
  onRangePick={(
  eventStartDate,
  eventEndDate,
  clearSecondSelectedCell,
  clearSelection
  ) => {
  setTimeout(() => {
  clearSelection();
  }, 3000);
  }}
  onEventRangePickInterception={(
  eventFirstDate,
  eventLastDate,
  eventsToBeDeleted,
  eventsToBeUpdated,
  clearSecondSelectedCell,
  clearSelection
  ) => {
  setTimeout(() => {
  clearSelection();
  }, 3000);
  }}
/>
</div>

Avance:

Ver en GitHub: https://github.com/sadiki-o/react-full-year-scheduler