@snack-uikit/calendar

Calendar

Installation

npm i @snack-uikit/calendar

Changelog

Example

import { Calendar } from '@snack-uikit/calendar';

<Calendar
  mode={Calendar.modes.Date}
  onChangeValue={(selectedDate: Date) => {
    // do something
  }}
/>

<Calendar
  mode={Calendar.modes.Range}
  onChangeValue={(selectedRange: [Date, Date]) => {
    // do something
  }}
/>

Calendar

Props

name	type	default value	description
mode*	enum CalendarMode: "date", "range"	-	Режим работы календаря: - Calendar.modes.Date - режим выбора даты - Calendar.modes.Date - режим выбора периода
size	enum Size: "s", "m", "l"	Calendar.sizes.M	Размер
today	number | Date	-	Дата сегодняшнего дня
showHolidays	boolean	-	Раскрашивает субботу и воскресенье
buildCellProps	(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };	-	Колбек установки свойств ячейка календаря. Вызывается на построение каждой ячейки. Принимает два параметра: Date - дата ячейки ViewMode: - Calendar.viewMode.Month отображение месяца, каждая ячейка - 1 день - Calendar.viewMode.Year отображение года, каждая ячейка - 1 месяц - Calendar.viewMode.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	(instance: HTMLButtonElement) => void	-	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