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