Перейти к содержимому
v2.5.0
English
Русский
Документация

Calendar

Calendar — продвинутый интерактивный составной компонент для согласованного выбора даты в видах дней, месяцев и лет.
StorybookИсходники

Обзор

Стилизация Calendar распределена между элементами управления в заголовке, размерами содержимого и видами дней, месяцев и лет. Большую часть настройки стоит начинать с уровня темы.

Публичные CSS-переменные

Текущая реализация раскрывает больше поведения размеров и раскладки, чем стабильных хуков --calendar-*. Считайте токены темы и задокументированные пропсы размера основной поверхностью стилизации.

SunMonTueWedThuFriSat
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
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
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January
February
March
April
May
June
July
August
September
October
November
December
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
ПеременнаяЗначениеВлияет на
ширина раскладки в зависимости от размераCalendarContent——
анимированная смена видоввиды и кнопки навигации——
унаследованные размеры как у кнопоккнопки видов——

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Содержимое

CalendarContent вычисляет min-width из токенов отступов для каждого размера.

Кнопки навигации

Кнопки навигации опираются на токены переходов и общие паттерны стилизации кнопок.

Виды

CalendarDays, CalendarMonths и CalendarYears анимируют смену видов через общие токены переходов.

Взаимодействие состояний и вариантов

  • compact меняет ожидания по плотности
  • размер меняет ширину содержимого и отступы видов
  • пользовательские шаблоны дней влияют на воспринимаемую плотность сильнее, чем стили корня

Примеры

Настройка календаря через тему

.brand-theme {
  --surface-primary: var(--color-orange-0);
  --focus-color: var(--color-orange-accent-400);
}

Плотный встроенный календарь

compact сжимает корень до содержимого, а size и variant на корне доходят до всех частей через контекст. Короткие форматы (format='short' у подписи и вида месяцев, format='narrow' у дней недели) удерживают заголовок и вид месяцев в узкой ширине.

dense-embedded-calendar.tsx · 51 строка
import {
  Calendar,
  CalendarContent,
  CalendarDay,
  CalendarDays,
  CalendarHeader,
  CalendarMonth,
  CalendarMonthLabel,
  CalendarMonths,
  CalendarNextButton,
  CalendarPrevButton,
  CalendarViewButton,

Не переопределяйте

  • не придумывайте незадокументированные переменные --calendar-*, как будто они публичный API
  • не стилизуйте пользовательские ячейки дат так, чтобы скрыть фокус или отключённое состояние