Calendar
Компоненты календарей для выбора даты или диапазона дат.
Calendar
Представляет собой универсальный компонент Calendar, в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном.
- Calendar
- CalendarBase
- CalendarDouble
- CalendarBaseRange
- CalendarDoubleRange
Выравнивание переключателя периода
В одиночном календаре periodSelectorAlign="start" (по умолчанию) размещает переключатель периода слева, а стрелки навигации справа. При periodSelectorAlign="center" переключатель расположен между стрелками по центру. Свойство также доступно в CalendarBase и CalendarBaseRange.
- Center
- Start
Размер календаря.
Размер календаря задается с помощью свойства size.
Сетка выбора даты.
Конечное отображение сетки календаря задается с помощью свойства type.
Пользовательские названия кварталов.
Названия кварталов задаются с помощью свойства quarterNames. По умолчанию используются значения Q1, Q2, Q3, Q4.
Выбор языка.
Для выбора языка необходимо указать свойство locale: 'ru' | 'en'.
По-умолчанию используется ru.
Всплывающая подсказка для событий календаря
С помощью eventList, eventMonthList, eventQuarterList и eventYearList
можно задать список событий для определенной даты
Элемент списка имеет следующую структуру:
type EventDay {
date: Date;
color?: string;
eventInfo?: ReactNode;
}
Типизация свойств всплывающего окна:
type EventTooltipOptions = {
/**
* Обертка для всплывающей подсказки для событий.
*/
bodyWrapper?: FC<PropsWithChildren>;
/**
* Размер всплывающей подсказки для событий.
*/
size?: string;
/**
* Направление раскрытия тултипа.
*/
placement?: PopoverPlacement | Array<PopoverPlacementBasic>;
/**
* Отступ окна относительно элемента, у которого оно вызвано.
* @default
* [0, 8]
*/
offset?: [number, number];
/**
* Видимость стрелки (хвоста).
*/
hasArrow?: boolean;
/**
* Анимированное появление/сокрытие.
*/
animated?: boolean;
/**
* Минимальная ширина окна (в rem).
*/
minWidth?: number | string;
/**
* Максимальная ширина окна (в rem).
*/
maxWidth?: number | string;
};