Calendar

Компоненты календарей для выбора даты или диапазона дат.

Calendar​

Представляет собой универсальный компонент Calendar, в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном.

Live Editor
Result
Open in CodeSandbox

Размер календаря.​

Размер календаря задается с помощью свойства size.

Live Editor
Result
Open in CodeSandbox

Сетка выбора даты.​

Конечное отображение сетки календаря задается с помощью свойства type.

Live Editor
Result
Open in CodeSandbox

Выбор языка.​

Для выбора языка необходимо указать свойство locale: 'ru' | 'en'.

По-умолчанию используется ru.

Live Editor
Result
Open in CodeSandbox

Всплывающая подсказка для событий календаря​

С помощью 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;
};
Live Editor
Result
Open in CodeSandbox