@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 |
8 months ago
6 months ago
6 months ago
8 months ago
7 months ago
4 months ago
8 months ago
6 months ago
7 months ago
6 months ago
5 months ago
9 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
9 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
7 months ago
5 months ago
9 months ago
5 months ago
6 months ago
7 months ago
3 months ago
4 months ago
2 months ago
8 months ago
4 months ago
4 months ago
2 months ago
5 months ago
6 months ago
4 months ago
5 months ago
6 months ago
6 months ago
9 months ago
8 months ago
5 months ago
8 months ago
2 months ago
3 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
5 months ago
6 months ago
7 months ago
5 months ago
7 months ago
6 months ago
9 months ago
9 months ago
2 months ago
2 months ago
3 months ago
5 months ago
2 months ago
4 months ago
7 months ago
5 months ago
6 months ago
6 months ago
4 months ago
3 months ago
3 months ago
3 months ago
3 months ago
8 months ago
3 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
4 months ago
9 months ago
6 months ago
8 months ago
7 months ago
7 months ago
7 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
1 year ago
11 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
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