Kalend — это компонент календаря для React с поддержкой отображения событий в нескольких представлениях с достаточным уровнем настройки.
Проверка демо или использование в реальном приложении
Подготовка
После установки Календ пакета вы можете начать с настройки с базового вида.
<Kalend onNewEventClick={onNewEventClick} initialView={CalendarView.WEEK} onEventClick={onEventClick} events={[]} initialDate={new Date().toISOString()} timezone={'Europe/Berlin'} />
Две важные вещи для правильной работы Календа:
- не забудьте также импортировать отдельные стили из
import ‘kalend/dist/styles/index.css’; - Календ наследует от своего родителя высоту, необходимую для корректной компоновки. Обязательно проверьте, правильно ли растянут родительский элемент с процентами или абсолютными значениями, если сетка календаря отображается неправильно.
События
Проверьте, правильно ли отформатированы ваши события, прежде чем передавать их в 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} />, }, }, ];