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 · today · active · in-range · adjacent · weekend · disabled
default
hover
today
active
in-range
adjacent
weekend
disabled

With Footer

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

Dark theme

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

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

26 custom properties · --ds-cal-*
Токен
Light
Dark
--ds-cal-bg
--ds-surface-0 · #FFFFFF
--ds-surface-0 dark
--ds-cal-shadow
--ds-shadow-lg
--ds-shadow-lg dark
--ds-cal-width-md / sm
320px / 280px
320px / 280px
--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-neg-default · #ff0508
--ds-neg-default dark
--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-nba-15 · rgba α
--ds-nba-15 dark
--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="grid" на .ds-cal__grid
  • aria-label="Сентябрь 2026" на .ds-cal
  • Кнопки дней: aria-label="15 сентября 2026"
  • Активная дата: aria-pressed="true"
  • Disabled дни: aria-disabled="true" tabindex="-1"
  • Навигация клавиатурой: стрелки ↑↓←→, Enter, Esc
Ограничения

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

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

State Explorer

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