@snack-uikit/calendar

Calendar

Installation

npm i @snack-uikit/calendar

Changelog

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