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.
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>
Ver en GitHub: https://github.com/sadiki-o/react-full-year-scheduler