@snack-uikit/calendar v0.12.5
Calendar
Installation
npm i @snack-uikit/calendar
Example
import { Calendar } from '@snack-uikit/calendar';
<Calendar
mode='date'
onChangeValue={(selectedDate: Date) => {
// do something
}}
/>
<Calendar
mode='range'
onChangeValue={(selectedRange: [Date, Date]) => {
// do something
}}
/>Calendar
Props
| name | type | default value | description |
|---|---|---|---|
| mode* | "date" | "range" | - | Режим работы календаря: - date - режим выбора даты - range - режим выбора периода |
| size | enum Size: "s", "m", "l" | m | Размер |
| today | number \| Date | - | Дата сегодняшнего дня |
| showHolidays | boolean | - | Раскрашивает субботу и воскресенье |
| buildCellProps | (date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ; | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: Date - дата ячейки ViewMode: - month отображение месяца, каждая ячейка - 1 день - year отображение года, каждая ячейка - 1 месяц - decade отображение декады, каждая ячейка - 1 год Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
| className | string | - | CSS-класс контейнера |
| fitToContainer | boolean | true | Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%). |
| style | CSSProperties | - | Объект со стилями на контейнер. |
| autofocus | boolean | - | Автофокус |
| locale | Intl.Locale | Проставляется в соответствие с языком в настройках браузера | Локаль, в соответствие с которой выставляется язык названий и первый день недели |
| onFocusLeave | (direction: FocusDirection) => void | - | Колбек потери фокуса. Вызывается со значением next, когда фокус покидает компонент, передвигаясь вперед, по клавише tab. Со значением prev - по клавише стрелки вверх или shift + tab. |
| navigationStartRef | RefCallback<HTMLButtonElement> | - | Ref-callback на первый доступный интерактивный элемент |
| value | Date \| Range | - | Выбранное значение. - в режиме date тип Date - в режиме range тип Range ([Date, Date]) |
| defaultValue | Date \| Range | - | Значение по-умолчанию для uncontrolled. - в режиме date тип Date - в режиме range тип Range ([Date, Date]) |
| onChangeValue | ((value: Date) => void) \| ((value: Range) => void) | - | Колбек выбора значения. - в режиме date принимает тип Date - в режиме range принимает тип Range |
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
10 months ago
1 year ago
12 months ago
1 year ago
12 months ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
9 months ago
10 months ago
8 months ago
1 year ago
10 months ago
10 months ago
8 months ago
11 months ago
12 months ago
9 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
8 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
8 months ago
8 months ago
9 months ago
11 months ago
8 months ago
10 months ago
1 year ago
11 months ago
11 months ago
11 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago