Calendar

Calendar — сетка месяца с выбором даты, собранная на Ark DatePicker в инлайновом режиме: поля ввода и поповера у неё нет, календарь всегда раскрыт. Месяц листается стрелками, а заголовок шапки переключает сетку: дни → месяцы → годы, и обратно вниз по выбранному значению — так до нужной даты в другом году доходят за три клика.

Значение — всегда массив дат, даже при одиночном выборе: selectionMode решает, сколько их может быть (single, multiple, range). Даты — обычные Date: календарь сам переводит их во внутренний формат Ark и обратно. Состояние ведётся контролируемо (пара value / onValueChange) или неконтролируемо (defaultValue).

Календарь — самостоятельный блок со своей подложкой: фон, рамка и скругление у него собственные, отдельная карточка вокруг не нужна. Ширина фиксированная — семь колонок текущей ступени размера; число недель всегда шесть, поэтому при листании сетка не прыгает по высоте.

Язык и первый день недели берутся из LocaleProvider приложения (в проекте — ru-RU, неделя с понедельника). Клавиатура и доступность — на стороне Ark: стрелки ходят по дням, PageUp и PageDown листают месяцы, Enter выбирает.

Использует: ButtonIcon

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Срок: 17.07.2026

Анатомия

Calendar
View (day | month | year)
ViewControl (шапка)
PrevTrigger (ButtonIcon)
ViewTrigger (Июль 2026 — смена вида)
NextTrigger (ButtonIcon)
Table (сетка)
TableHead (пн … вс, только вид дней)
TableBody
TableCellTrigger (день / месяц / год)

Примеры

Диапазон

selectionMode="range" выбирает период: первый клик задаёт начало, второй — конец, дни между ними подсвечиваются приглушённым акцентом ещё при наведении. В value при этом две даты — начало и конец; пока выбрано только начало, в массиве одна.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Спринт: 13.07.2026 — 24.07.2026

Несколько дат

selectionMode="multiple" копит в value произвольный набор дат: клик по невыбранному дню добавляет его, по выбранному — убирает. Дни при этом остаются отдельными — полосой, как диапазон, они не читаются.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
Отмечено дней: 3

Границы выбора

min и max ограничивают доступный период: дни за границами тускнеют и не выбираются, а стрелка листания упирается в месяц с последним доступным днём. Так задают «не раньше сегодня» для срока задачи или окно, в которое должен попасть спринт.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

Вариант

Смысловой вариант — цвет выбранного дня, подсветки диапазона и кольца вокруг сегодняшнего числа: primary — акцент (по умолчанию), success / warning / danger — семантические статусы, default и secondary — нейтральные. Остальная сетка остаётся ахроматичной: цвет здесь — признак выбора, а не оформление таблицы.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

Размер

Ступень задаёт сторону дневной ячейки и кегль — вместе с ними меняется и ширина всего календаря (семь колонок). xs — для плотных боковых панелей и поповеров, sm — базовый, lg и xl — для календаря как самостоятельного экрана. Ступень наследуется от контейнера: календарь внутри Cell size="md" укрупнится сам.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

Скругление

Скругление подложки дня. По умолчанию дни круглые (circle) — подложка квадратная, и скругление в половину стороны даёт круг; none, sm и lg дают углы разной мягкости. Тем же значением скругляются края полосы диапазона, а её середина остаётся прямой — иначе период рассыпается на отдельные дни.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

Кастомный цвет

color — цвет выбора вне стандартного набора вариантов, принимает любое CSS-значение и перекрывает цвет из variant. Цвет числа на заливке подбирается автоматически: на светлом фоне — чёрный, на тёмном — белый.

29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

className

27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6

style

Не удалось сгенерировать пример - настройте его вручную (example) или отключите (disabled: true). тип пропа "style" (CSSProperties) не является перечислением литералов

API

PropTypeDefault
value

Выбранные даты (контролируемая модель) — массив даже при одиночном выборе. Пара с onValueChange

Date[]-
defaultValue

Начальный выбор для неконтролируемого календаря — когда вести состояние вручную не нужно

Date[]-
onValueChange

Колбэк смены выбора: получает массив выбранных дат

(value: Date[]) => void-
selectionMode

Режим выбора: одна дата, несколько дат или диапазон

"single" | "multiple" | "range""single"
min

Минимальная доступная дата — всё, что раньше, не выбирается

Date-
max

Максимальная доступная дата — всё, что позже, не выбирается

Date-
disabled

Отключает календарь: дни тускнеют и не выбираются

boolean-
readOnly

Показывает выбор, но запрещает менять его — календарь только для чтения

boolean-
classNamestring-
styleCSSProperties-
variant

Смысловой вариант — задаёт цвет

Variant"primary"
size

Размер компонента

Size-
radius

Скругление углов: circle — «таблетка»

Radius-
color

Кастомный цвет — для случаев вне стандартного набора вариантов. Принимает любое CSS-значение, имеет приоритет над цветом из variant

string-

Наследуется от Pick<VisualProps, K>