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)
сентябрь 2026
Пресеты — вариант «список» (расширение ДС)
Пн
Вт
Ср
Чт
Пт
Сб
Вс
Время — два поля 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

  • Кнопки-иконки ‹ / › — переход по месяцам; они есть только в виде «дни», в панелях месяца и года шапка статична
  • Клик по месяцу → панель месяцев, клик по году → панель лет
  • Кнопки месяца и года — Button ghost, intent info
ARIA паттерн

Доступность

  • role="group" на .ds-cal (aria-label="Календарь") и на .ds-cal__picker-grid панелей месяца и года
  • Сетка дней — role="grid" (aria-label="Дни месяца"): строки role="row", подписи дней недели role="columnheader", ячейки role="gridcell"
  • Кнопки дней: aria-label="15 сентября 2026 г." — полная дата
  • Выбранная дата: aria-selected="true"; в панелях месяца и года — aria-pressed
  • Недоступные дни: aria-disabled="true" (не нативный disabled — дата остаётся в фокусе)
  • Клавиатура: в порядке табуляции одна ячейка (roving tabindex), стрелки, Home/End, PageUp/PageDown

До 2026-09 здесь стояло «роли grid сняты, обработчиков клавиатуры нет, навигация обычной табуляцией». Полный grid-паттерн с тех пор сделан (CAL-KEYBOARD-GRID-PATTERN): структура строк и ячеек в DOM есть, и роль её описывает. Текст справки отставал от отгруженного компонента — поправлено 2026-09-24.

Ограничения

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

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

State Explorer

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