05 · Components · Stable

Calendar

Standalone-календарь для выбора даты и диапазонов дат. Два размера (MD/SM), навигация по месяцам и годам, поддержка range-режима, кастомизация праздников и рабочих дней. Оптимизирован для B2B финансовых дашбордов.

Simple Calendar

title-only · MD и SM
MD — 320px
Сентябрь 2026
SM — 280px
Сентябрь 2026

With Navigation

месяц + год · стрелки ‹ ›
Default — month nav
Today highlighted

День — состояния

default · hover · today · active · in-range · adjacent · weekend · disabled · event
default
hover
today
active
active · hover
in-range
adjacent
weekend
disabled
event

With Footer

Apply / Cancel · диапазон дат
Range selection + Footer
SM size + Footer

Панель месяца/года · пресеты · время

picker-grid 3 колонки · presets · time = два поля LabelIn
Выбор месяца — статичный заголовок
2026
Выбор года + пресеты — база (пара, Figma)
Пресеты — вариант «список» (расширение ДС)
Время — два поля LabelIn

Dark theme

--ds-cal-bg флипает · nba-40 hover

Токены компонента

26 custom properties · --ds-cal-*
Токен
Light
Dark
--ds-cal-bg
--ds-surface-nb-base · #FFFFFF
--ds-surface-nb-base · #020304
--ds-cal-event-dot
--ds-surface-info-accent · #5475F8
--ds-surface-info-accent · #5679FD
--ds-cal-event-dot-selected
--ds-surface-info-high · #D6E1FC
--ds-surface-info-high · #1C2B6C
--ds-cal-shadow
--ds-shadow-lg
--ds-shadow-lg dark
--ds-cal-width-md / sm
344px / 300px
344px / 300px
--ds-cal-dropdown-r-md / sm
16px / 12px
16px / 12px
--ds-cal-date-size-md / sm
40px / 32px
40px / 32px
--ds-cal-text-size-md / sm
16px / 14px
16px / 14px
--ds-cal-part-height-md / sm
40px / 32px
40px / 32px
--ds-cal-part-r-md / sm
12px / 8px
12px / 8px
--ds-cal-day-text
--ds-text-primary · #0D0F11
--ds-text-primary dark
--ds-cal-day-text-adjacent
--ds-text-tertiary
--ds-text-tertiary dark
--ds-cal-day-text-weekend
--ds-text-brand-accent · #d70000
--ds-text-brand-accent dark · #ffbfb5
--ds-cal-day-text-disabled
--ds-disabled-text
--ds-disabled-text dark
--ds-cal-day-text-active
--ds-text-invert · #FFFFFF
--ds-text-invert dark
--ds-cal-day-bg-hover
--ds-nba-20 · rgba α
--ds-nba-40 (dark override)
--ds-cal-day-bg-active
--ds-neutral-fill · #222629
--ds-neutral-fill dark · #FFF
--ds-cal-day-bg-in-range
--ds-surface-nb-medium · #e9edf2
--ds-surface-nb-medium dark · #2c3033
--ds-cal-day-border-today
1.5px solid --ds-nba-border
1.5px solid --ds-nba-border dark
--ds-cal-nav-color
--ds-info-500 · #5475F8
--ds-info-500 dark
--ds-cal-nav-color-hover
--ds-info-700
--ds-info-700 dark
--ds-cal-preset-border
--ds-nba-border · alpha
--ds-nba-border dark
--ds-cal-footer-gap-md / sm
12px / 8px
12px / 8px

Правила использования

B2B финансовые паттерны · A11y
Когда применять

Standalone Calendar

  • Dashboard виджет — inline-календарь внутри дашборда без дополнительного оверлея
  • Date filter — быстрый выбор даты в side-panel фильтров
  • Диапазон отчётного периода — range-режим с Footer (Apply/Cancel)
  • SM-размер — в компактных боковых панелях (280px)
  • MD-размер — в основных областях контента (320px)
Навигация

Month / Year picker

  • Кнопки «‹» / «›» — переход по месяцам
  • Кнопки ««» / «»» — переход по годам
  • Клик по «Сентябрь» → month-picker overlay
  • Клик по «2026» → year-picker overlay
  • --ds-cal-nav-color = info-500 (#5475F8) — интерактивные метки
ARIA паттерн

Доступность

  • role="group" на .ds-cal, .ds-cal__grid и .ds-cal__picker-grid
  • aria-label="Календарь" / "Дни месяца" — имя группы
  • Кнопки дней: aria-label="15 сентября 2026 г." — полная дата
  • Активная дата: aria-pressed="true"
  • Disabled дни: aria-disabled="true" tabindex="-1"
  • Подписи дней недели: aria-hidden — дублируют имя кнопки
  • Навигация — обычной табуляцией по кнопкам

Раньше здесь стояли role="grid" и role="application", а строкой ниже обещались стрелки ↑↓←→ и Esc. Обработчиков клавиатуры в компоненте нет ни одного, поэтому application отбирал у скринридера режим чтения, ничего не давая взамен, а grid заявлял структуру строк и ячеек, которой в DOM не было. Роли сняты. Полный grid-паттерн со стрелками, Home/End и roving tabindex — отдельная задача.

Ограничения

Чего избегать

  • Не использовать Calendar внутри модального окна — вместо него DatePicker
  • Не показывать более двух месяцев рядом — нет токена для двух колонок
  • Не использовать SM в таблицах — минимальный контекст требует MD
  • Weekends (Сб/Вс) всегда красные — не переопределять цвет выходных

State Explorer

Интерактивный тест состояний — переключай и смотри