Kalend — это компонент календаря для React с поддержкой отображения событий в нескольких представлениях с достаточным уровнем настройки.

Проверка демо или использование в реальном приложении

Гитхаб-страница

Подготовка

После установки Календ пакета вы можете начать с настройки с базового вида.

<Kalend
  onNewEventClick={onNewEventClick}
  initialView={CalendarView.WEEK}
  onEventClick={onEventClick}
  events={[]}
  initialDate={new Date().toISOString()}
  timezone={'Europe/Berlin'}
/>

Две важные вещи для правильной работы Календа:

  1. не забудьте также импортировать отдельные стили из
    import ‘kalend/dist/styles/index.css’;
  2. Календ наследует от своего родителя высоту, необходимую для корректной компоновки. Обязательно проверьте, правильно ли растянут родительский элемент с процентами или абсолютными значениями, если сетка календаря отображается неправильно.

События

Проверьте, правильно ли отформатированы ваши события, прежде чем передавать их в Kalend. Для базового формата требуется идентификатор, даты в строке ISO, сводка с другими необязательными значениями, такими как часовой пояс или цвет.

const events = [
  {
    id: '5203e5d0-f79d-4a55-b03c-f06a074251cf',
    startAt: '2022-09-03T00:14:49.574Z',
    endAt: '2022-09-03T02:01:49.574Z',
    summary: 'Test event',
    color: 'blue',
    allDay: false,
    timezoneStartAt: 'UTC',
  },
];

Если задать для события значение allDay, оно перемещается из сетки календаря в заголовок. Для многодневных событий вам не нужно устанавливать их как allDay, так как это устанавливается явно во время рендеринга.

Обратные вызовы

Основное взаимодействие с Kalend осуществляется через функции обратного вызова, которые передаются компоненту в качестве реквизита.

Создание нового события — onNewEventClick

Каждый раз, когда вы нажимаете на пустое место в сетке календаря, вызывается обратный вызов onNewEventClick с необходимыми данными, необходимыми для создания нового события. Для простоты вы можете просто взять даты startAt и endAt и использовать их для создания нового события.

В представлении месяца обратный вызов вызывается, когда вы щелкаете в заголовке столбца дня.

const onNewEventClick = (data: OnNewEventClickData) => {
  const eventData = {
    startAt: data.startAt,
    endAt: data.endAt,
  };
};

Нажатие на событие —onEventClick

Нажатие на событие вернет вам необработанный объект, который вы передали в массиве событий в Kalend.

const onEventClick = (data: OnEventClickData) => {
  ......
};

Настройка

Реквизит

Календари используются по-разному в разных регионах или просто по предпочтениям, поэтому вы можете переопределить поведение по умолчанию с помощью реквизитов.

Вы можете изменить день начала по умолчанию на воскресенье, переключить формат времени между 12/24, изменить язык, автоматическую прокрутку к текущему времени или к другому выбранному значению.

UI

Для более сложных изменений пользовательского интерфейса можно использовать пользовательские компоненты для кнопок навигации или заголовка даты. Это можно сделать благодаря передаче ref в Kalend и доступу к внутренним функциям.

const kalendRef = useRef();
const goForward = () => {
  kalendRef?.current?.navigateForward();
};
....
<>
<button onClick={goForward}>Forward</button>
  <Kalend
    kalendRef={kalendRef}
    .....
  />
</>

Чтобы получить текущие значения из Kalend, вы можете просто использовать другую функцию обратного вызова onStateChange.

const kalendRef = useRef();
const [selectedDate, setSelectedDate] = useState(
  DateTime.now()
);
const onStateChange = (state: KalendState) => {
  setSelectedDate(state.selectedDate);
};
....
<Kalend
  kalendRef={kalendRef}
  onStateChange{onStateChange}  
  .....
/>

Стиль

Календ использует в основном CSS для стилей с именами классов с префиксом Kalend__, поэтому довольно легко настроить стиль под свои нужды. Однако имейте в виду, что будущие обновления могут нарушить вашу конфигурацию или привести к нарушению расчетов макета.

Можно изменить стили событий для каждого элемента, передав значение стиля объекту события.

const events = [
  {
    id: '123',
    ...
    style: {
      textDecoration: 'line-through',
      border: 'solid 1px red',
      background: 'white',
      color: 'black',
    },
  },
];

Если вы хотите еще больше изменить события и добавить, например, несколько кнопок, вы можете передать пользовательский компонент для каждого представления. Имейте в виду, что события имеют ограниченное пространство в зависимости от их высоты, ширины или отношения к другим событиям, поэтому не забудьте проверить результат.

const events = [
  {
    id: '123',
    children: {
      agendaView: <AgendaEvent summary={summary} />,
      daysView: <Event summary={summary} />,
      monthView: <MonthEvent summary={summary} />,
    },
  },
];