@snack-uikit/calendar NPM

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`