Настраиваемый планировщик на весь год в React

Компонент React с открытым исходным кодом, предназначенный для предоставления простого, настраиваемого и удобного в использовании решения для календаря на весь год как для частных лиц, так и для организаций.

React Full Year Scheduler, созданный из-за потребности в более гибком и доступном инструменте календаря, идеально подходит для различных целей, таких как планирование мероприятий, отслеживание сроков и планирование встреч.

Компонент предлагает комплексное представление по годам, что позволяет легко визуализировать годовой календарь и управлять им. С акцентом на настройку и доступность, он позволяет вам устанавливать праздники и рабочие дни, выделять и оформлять события разными цветами, а также создавать макет календаря с учетом ваших конкретных потребностей. React Full Year Scheduler не имеет внешних зависимостей, кроме Day.js и TailwindCSS, что обеспечивает плавную интеграцию в ваши проекты.

Как это использовать:

1. Установка.

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

2. Импортируйте необходимые модули.

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

3. Добавьте свои события в планировщик.

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. Добавьте ReactFullYearSchedulerкомпонент в приложение.

<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>

Предварительный просмотр:

Посмотреть на GitHub: https://github.com/sadiki-o/react-full-year-scheduler .