Календарь

Календарь — набор классов поверхности, на которой показывают дни месяца, выбранную дату или период. Поведения у него нет: перелистывание, выбор даты и клавиатуру даёт Smart-компонент Datepicker, который рисует эту же поверхность. Классы нужны, чтобы показать календарь, собранный своим кодом или на сервере.

Пример

Сентябрь 2026

HTML

<div class="sf-datepicker flex flex-col" role="group" aria-label="Календарь, сентябрь 2026">
  <div class="sf-datepicker-top grid items-cross-center">
    <button type="button" class="sf-icon-button sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex" aria-label="Предыдущий месяц"><i class="sf-icon" aria-hidden="true">chevron_left</i></button>
    <div class="sf-datepicker-period flex content-main-center items-cross-center">Сентябрь 2026</div>
    <button type="button" class="sf-icon-button sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1 flex" aria-label="Следующий месяц"><i class="sf-icon" aria-hidden="true">chevron_right</i></button>
  </div>
  <div class="sf-datepicker-row grid grid-col-7" aria-hidden="true"><span class="sf-datepicker-weekday">Пн</span><span class="sf-datepicker-weekday">Вт</span><span class="sf-datepicker-weekday">Ср</span><span class="sf-datepicker-weekday">Чт</span><span class="sf-datepicker-weekday">Пт</span><span class="sf-datepicker-weekday">Сб</span><span class="sf-datepicker-weekday">Вс</span></div>
  <div class="sf-datepicker-main">
    <div class="sf-datepicker-row grid grid-col-7">
      <button class="sf-datepicker-day sf-datepicker-another-month flex flex-col content-main-center items-cross-center" type="button" aria-label="31 августа 2026"><span class="sf-datepicker-day-date">31</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="1 сентября 2026"><span class="sf-datepicker-day-date">1</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="2 сентября 2026"><span class="sf-datepicker-day-date">2</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="3 сентября 2026"><span class="sf-datepicker-day-date">3</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="4 сентября 2026"><span class="sf-datepicker-day-date">4</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="5 сентября 2026"><span class="sf-datepicker-day-date">5</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="6 сентября 2026"><span class="sf-datepicker-day-date">6</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="7 сентября 2026"><span class="sf-datepicker-day-date">7</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="8 сентября 2026"><span class="sf-datepicker-day-date">8</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="9 сентября 2026"><span class="sf-datepicker-day-date">9</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="10 сентября 2026"><span class="sf-datepicker-day-date">10</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="11 сентября 2026"><span class="sf-datepicker-day-date">11</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="12 сентября 2026"><span class="sf-datepicker-day-date">12</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="13 сентября 2026"><span class="sf-datepicker-day-date">13</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="14 сентября 2026"><span class="sf-datepicker-day-date">14</span></button>
      <button class="sf-datepicker-day active flex flex-col content-main-center items-cross-center" type="button" aria-label="15 сентября 2026, выбрано" aria-pressed="true"><span class="sf-datepicker-day-date">15</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="16 сентября 2026"><span class="sf-datepicker-day-date">16</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="17 сентября 2026"><span class="sf-datepicker-day-date">17</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="18 сентября 2026"><span class="sf-datepicker-day-date">18</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="19 сентября 2026"><span class="sf-datepicker-day-date">19</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="20 сентября 2026"><span class="sf-datepicker-day-date">20</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="21 сентября 2026"><span class="sf-datepicker-day-date">21</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="22 сентября 2026"><span class="sf-datepicker-day-date">22</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="23 сентября 2026"><span class="sf-datepicker-day-date">23</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="24 сентября 2026"><span class="sf-datepicker-day-date">24</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="25 сентября 2026"><span class="sf-datepicker-day-date">25</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="26 сентября 2026"><span class="sf-datepicker-day-date">26</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="27 сентября 2026"><span class="sf-datepicker-day-date">27</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="28 сентября 2026"><span class="sf-datepicker-day-date">28</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="29 сентября 2026"><span class="sf-datepicker-day-date">29</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="30 сентября 2026"><span class="sf-datepicker-day-date">30</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month flex flex-col content-main-center items-cross-center" type="button" aria-label="1 октября 2026"><span class="sf-datepicker-day-date">1</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month flex flex-col content-main-center items-cross-center" type="button" aria-label="2 октября 2026"><span class="sf-datepicker-day-date">2</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="3 октября 2026"><span class="sf-datepicker-day-date">3</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="4 октября 2026"><span class="sf-datepicker-day-date">4</span></button>
    </div>
  </div>
</div>

Разметка

Минимальную разметку показывает пример выше. Части вложены так: sf-datepicker → шапка sf-datepicker-top, строка дней недели sf-datepicker-row с sf-datepicker-weekday и sf-datepicker-main со строкой дней sf-datepicker-row.

sf-datepicker — поверхность календаря: приподнятый фон, тень, скругление и ширина на семь дней. Дайте ей role="group" и aria-label с месяцем.
sf-datepicker-top с утилитами grid items-cross-center делит шапку на три колонки: кнопка назад, sf-datepicker-period с названием месяца, кнопка вперёд.
Дни недели — sf-datepicker-weekday в строке grid grid-col-7; строку скрывайте от вспомогательных технологий: полную дату называет кнопка дня.
День — <button type="button" class="sf-datepicker-day"> с числом в sf-datepicker-day-date и полной датой в aria-label.
Для выбора месяца или года поверх дней кладут sf-datepicker-context с кнопками sf-datepicker-text.

Варианты

Вид дня

sf-datepicker-day-off окрашивает число выходного дня; выходной остаётся доступным для выбора. sf-datepicker-another-month приглушает дни соседнего месяца в первой и последней неделе. sf-datepicker-day-info под числом показывает короткую подпись дня: число мест, событий или цену.

sf-datepicker-day-info — 29 sf-datepicker-day-off — сб и вс sf-datepicker-another-month — 1–4 октября

HTML

<div class="flex flex-col gap-2 items-start">
  <div class="sf-datepicker flex flex-col gap-1" role="group" aria-label="Виды дней">
    <div class="sf-datepicker-row grid grid-col-7" aria-hidden="true"><span class="sf-datepicker-weekday">Пн</span><span class="sf-datepicker-weekday">Вт</span><span class="sf-datepicker-weekday">Ср</span><span class="sf-datepicker-weekday">Чт</span><span class="sf-datepicker-weekday">Пт</span><span class="sf-datepicker-weekday">Сб</span><span class="sf-datepicker-weekday">Вс</span></div>
    <div class="sf-datepicker-row grid grid-col-7">
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="28 сентября 2026"><span class="sf-datepicker-day-date">28</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="29 сентября 2026, 3 события"><span class="sf-datepicker-day-date">29</span><span class="sf-datepicker-day-info">3</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="30 сентября 2026"><span class="sf-datepicker-day-date">30</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month flex flex-col content-main-center items-cross-center" type="button" aria-label="1 октября 2026"><span class="sf-datepicker-day-date">1</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month flex flex-col content-main-center items-cross-center" type="button" aria-label="2 октября 2026"><span class="sf-datepicker-day-date">2</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="3 октября 2026, выходной"><span class="sf-datepicker-day-date">3</span></button>
      <button class="sf-datepicker-day sf-datepicker-another-month sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="4 октября 2026, выходной"><span class="sf-datepicker-day-date">4</span></button>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">sf-datepicker-day-info — 29</code>
    <code class="text-1/2 color-on-surface-variant">sf-datepicker-day-off — сб и вс</code>
    <code class="text-1/2 color-on-surface-variant">sf-datepicker-another-month — 1–4 октября</code>
  </div>
</div>

Ячейки месяца и года

sf-datepicker-text — ячейка месяца или года для выбора без дней. Ячейки принимают те же состояния, что и дни: active, disabled и период sf-datepicker-text-start, sf-datepicker-text-selected, sf-datepicker-text-end. Ячейки периода ставьте в сетку без промежутка (grid grid-col-3 без класса gap-*): промежуток разрывает полосу периода. Каждая ячейка периода, включая средние, получает aria-pressed="true".

active — февраль, disabled — март sf-datepicker-text-start → text-selected → text-end — апрель–июнь

HTML

<div class="flex flex-col gap-2 items-start">
  <div class="sf-datepicker flex flex-col gap-2" role="group" aria-label="Выбор месяца">
    <div class="flex flex-col gap-1">
      <div class="grid grid-col-3 gap-1">
        <button class="sf-datepicker-text flex content-main-center items-cross-center" type="button"><span class="sf-datepicker-day-date">Январь</span></button>
        <button class="sf-datepicker-text active flex content-main-center items-cross-center" type="button" aria-pressed="true"><span class="sf-datepicker-day-date">Февраль</span></button>
        <button class="sf-datepicker-text disabled flex content-main-center items-cross-center" type="button" disabled><span class="sf-datepicker-day-date">Март</span></button>
      </div>
    </div>
    <div class="flex flex-col gap-1">
      <div class="grid grid-col-3">
        <button class="sf-datepicker-text sf-datepicker-text-start flex content-main-center items-cross-center" type="button" aria-pressed="true"><span class="sf-datepicker-day-date">Апрель</span></button>
        <button class="sf-datepicker-text sf-datepicker-text-selected flex content-main-center items-cross-center" type="button" aria-pressed="true"><span class="sf-datepicker-day-date">Май</span></button>
        <button class="sf-datepicker-text sf-datepicker-text-end flex content-main-center items-cross-center" type="button" aria-pressed="true"><span class="sf-datepicker-day-date">Июнь</span></button>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-1">
      <code class="text-1/2 color-on-surface-variant">active — февраль, disabled — март</code>
      <code class="text-1/2 color-on-surface-variant">sf-datepicker-text-start → text-selected → text-end — апрель–июнь</code>
  </div>
</div>

Состояния

Состояния дня задают классы и нативный disabled на кнопке. Наведение и нажатие компонент показывает сам.

Выбран

Класс active заливает день основным цветом, в том числе выходной. Сообщите выбор и в aria-pressed="true" или в aria-label.

active — 15

HTML

<div class="flex flex-col gap-2 items-start">
  <div class="sf-datepicker flex flex-col gap-1" role="group" aria-label="Выбранный день">
    <div class="sf-datepicker-row grid grid-col-7" aria-hidden="true"><span class="sf-datepicker-weekday">Пн</span><span class="sf-datepicker-weekday">Вт</span><span class="sf-datepicker-weekday">Ср</span><span class="sf-datepicker-weekday">Чт</span><span class="sf-datepicker-weekday">Пт</span><span class="sf-datepicker-weekday">Сб</span><span class="sf-datepicker-weekday">Вс</span></div>
    <div class="sf-datepicker-row grid grid-col-7">
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="14 сентября 2026"><span class="sf-datepicker-day-date">14</span></button>
      <button class="sf-datepicker-day active flex flex-col content-main-center items-cross-center" type="button" aria-label="15 сентября 2026, выбрано" aria-pressed="true"><span class="sf-datepicker-day-date">15</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="16 сентября 2026"><span class="sf-datepicker-day-date">16</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="17 сентября 2026"><span class="sf-datepicker-day-date">17</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="18 сентября 2026"><span class="sf-datepicker-day-date">18</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="19 сентября 2026, выходной"><span class="sf-datepicker-day-date">19</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="20 сентября 2026, выходной"><span class="sf-datepicker-day-date">20</span></button>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">active — 15</code>
  </div>
</div>

Период

Период отмечают три класса: sf-datepicker-day-start на первом дне, sf-datepicker-day-selected на днях внутри и sf-datepicker-day-end на последнем. Начало и конец заливаются основным цветом и скругляются с внешней стороны, середина — светлой заливкой.

sf-datepicker-day-start — 14 sf-datepicker-day-selected — 15–17 sf-datepicker-day-end — 18

HTML

<div class="flex flex-col gap-2 items-start">
  <div class="sf-datepicker flex flex-col gap-1" role="group" aria-label="Период с 14 по 18 сентября 2026">
    <div class="sf-datepicker-row grid grid-col-7" aria-hidden="true"><span class="sf-datepicker-weekday">Пн</span><span class="sf-datepicker-weekday">Вт</span><span class="sf-datepicker-weekday">Ср</span><span class="sf-datepicker-weekday">Чт</span><span class="sf-datepicker-weekday">Пт</span><span class="sf-datepicker-weekday">Сб</span><span class="sf-datepicker-weekday">Вс</span></div>
    <div class="sf-datepicker-row grid grid-col-7">
      <button class="sf-datepicker-day sf-datepicker-day-start flex flex-col content-main-center items-cross-center" type="button" aria-label="14 сентября 2026, начало периода" aria-pressed="true"><span class="sf-datepicker-day-date">14</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-selected flex flex-col content-main-center items-cross-center" type="button" aria-label="15 сентября 2026, в периоде"><span class="sf-datepicker-day-date">15</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-selected flex flex-col content-main-center items-cross-center" type="button" aria-label="16 сентября 2026, в периоде"><span class="sf-datepicker-day-date">16</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-selected flex flex-col content-main-center items-cross-center" type="button" aria-label="17 сентября 2026, в периоде"><span class="sf-datepicker-day-date">17</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-end flex flex-col content-main-center items-cross-center" type="button" aria-label="18 сентября 2026, конец периода" aria-pressed="true"><span class="sf-datepicker-day-date">18</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="19 сентября 2026, выходной"><span class="sf-datepicker-day-date">19</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="20 сентября 2026, выходной"><span class="sf-datepicker-day-date">20</span></button>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">sf-datepicker-day-start — 14</code>
    <code class="text-1/2 color-on-surface-variant">sf-datepicker-day-selected — 15–17</code>
    <code class="text-1/2 color-on-surface-variant">sf-datepicker-day-end — 18</code>
  </div>
</div>

Недоступен

Нативный disabled на кнопке или класс disabled приглушает число и подпись; недоступный выходной теряет цвет выходного. Нативный disabled к тому же убирает день из порядка фокуса.

disabled — 21, 22, 26, 27

HTML

<div class="flex flex-col gap-2 items-start">
  <div class="sf-datepicker flex flex-col gap-1" role="group" aria-label="Недоступные дни">
    <div class="sf-datepicker-row grid grid-col-7" aria-hidden="true"><span class="sf-datepicker-weekday">Пн</span><span class="sf-datepicker-weekday">Вт</span><span class="sf-datepicker-weekday">Ср</span><span class="sf-datepicker-weekday">Чт</span><span class="sf-datepicker-weekday">Пт</span><span class="sf-datepicker-weekday">Сб</span><span class="sf-datepicker-weekday">Вс</span></div>
    <div class="sf-datepicker-row grid grid-col-7">
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="21 сентября 2026, недоступно" disabled><span class="sf-datepicker-day-date">21</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="22 сентября 2026, недоступно" disabled><span class="sf-datepicker-day-date">22</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="23 сентября 2026"><span class="sf-datepicker-day-date">23</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="24 сентября 2026"><span class="sf-datepicker-day-date">24</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="25 сентября 2026"><span class="sf-datepicker-day-date">25</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="26 сентября 2026, выходной, недоступно" disabled><span class="sf-datepicker-day-date">26</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="27 сентября 2026, выходной, недоступно" disabled><span class="sf-datepicker-day-date">27</span></button>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">disabled — 21, 22, 26, 27</code>
  </div>
</div>

Фокус

При переходе клавишей Tab день получает кольцо фокуса по :focus-visible. В примере фокус показан классом focus-visible, который CSS компонента читает наравне с :focus-visible.

focus-visible — 23 active focus-visible — 24

HTML

<div class="flex flex-col gap-2 items-start">
  <div class="sf-datepicker flex flex-col gap-1" role="group" aria-label="День в фокусе">
    <div class="sf-datepicker-row grid grid-col-7" aria-hidden="true"><span class="sf-datepicker-weekday">Пн</span><span class="sf-datepicker-weekday">Вт</span><span class="sf-datepicker-weekday">Ср</span><span class="sf-datepicker-weekday">Чт</span><span class="sf-datepicker-weekday">Пт</span><span class="sf-datepicker-weekday">Сб</span><span class="sf-datepicker-weekday">Вс</span></div>
    <div class="sf-datepicker-row grid grid-col-7">
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="21 сентября 2026"><span class="sf-datepicker-day-date">21</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="22 сентября 2026"><span class="sf-datepicker-day-date">22</span></button>
      <button class="sf-datepicker-day focus-visible flex flex-col content-main-center items-cross-center" type="button" aria-label="23 сентября 2026"><span class="sf-datepicker-day-date">23</span></button>
      <button class="sf-datepicker-day active focus-visible flex flex-col content-main-center items-cross-center" type="button" aria-label="24 сентября 2026, выбрано" aria-pressed="true"><span class="sf-datepicker-day-date">24</span></button>
      <button class="sf-datepicker-day flex flex-col content-main-center items-cross-center" type="button" aria-label="25 сентября 2026"><span class="sf-datepicker-day-date">25</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="26 сентября 2026, выходной"><span class="sf-datepicker-day-date">26</span></button>
      <button class="sf-datepicker-day sf-datepicker-day-off flex flex-col content-main-center items-cross-center" type="button" aria-label="27 сентября 2026, выходной"><span class="sf-datepicker-day-date">27</span></button>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">focus-visible — 23</code>
    <code class="text-1/2 color-on-surface-variant">active focus-visible — 24</code>
  </div>
</div>

Доступность

Кнопке дня нужна полная дата в aria-label: «15 сентября 2026». Число без месяца и года экранный диктор прочтёт без контекста.
Выбор, период, выходной и недоступность передавайте не только цветом: aria-pressed, disabled и текст в aria-label.
Сегодняшний день отмечайте aria-current="date".
Клавиатурную навигацию по дням (стрелки, Home, End, листание месяцев) классы не дают: её даёт Smart Datepicker или ваш код.
В режиме принудительных цветов выбранные и недоступные дни рисуются системными цветами.

Классы

Что	Классы
Блок	`sf-datepicker`
Части	`sf-datepicker-another-month`, `sf-datepicker-container`, `sf-datepicker-context`, `sf-datepicker-day`, `sf-datepicker-day-date`, `sf-datepicker-day-end`, `sf-datepicker-day-info`, `sf-datepicker-day-off`, `sf-datepicker-day-selected`, `sf-datepicker-day-start`, `sf-datepicker-main`, `sf-datepicker-period`, `sf-datepicker-preset`, `sf-datepicker-presets`, `sf-datepicker-row`, `sf-datepicker-text`, `sf-datepicker-text-end`, `sf-datepicker-text-selected`, `sf-datepicker-text-start`, `sf-datepicker-top`, `sf-datepicker-weekday`
Модификаторы	`sf-datepicker--presets`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-datepicker); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-datepicker--inline-size`	`calc(var(--sf-ui-1--control-height) * 7 + var(--sf-space-1))`	`width`, `inline-size`
`--sf-datepicker-another-month--opacity`	не задана; задают модификаторы, например `.sf-datepicker-day.sf-datepicker-another-month:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected)`: `1`	`opacity`
`--sf-datepicker-context--background-color`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-context`: `var(--sf-datepicker--background-color, var(--sf-elevation-3--surface))`	`background`
`--sf-datepicker-day--background-color`	не задана; задают модификаторы, например `.sf-datepicker-day`: `var(--sf-transparent)`	`background-color`
`--sf-datepicker-day--border-end-end-radius`	не задана; задают модификаторы, например `.sf-datepicker-day.sf-datepicker-day-start:not(.sf-datepicker-day.sf-datepicker-day-end)`: `0`	`border-end-end-radius`
`--sf-datepicker-day--border-end-start-radius`	не задана; задают модификаторы, например `.sf-datepicker-day.sf-datepicker-day-end:not(.sf-datepicker-day.sf-datepicker-day-start)`: `0`	`border-end-start-radius`
`--sf-datepicker-day--border-start-end-radius`	не задана; задают модификаторы, например `.sf-datepicker-day.sf-datepicker-day-start:not(.sf-datepicker-day.sf-datepicker-day-end)`: `0`	`border-start-end-radius`
`--sf-datepicker-day--border-start-start-radius`	не задана; задают модификаторы, например `.sf-datepicker-day.sf-datepicker-day-end:not(.sf-datepicker-day.sf-datepicker-day-start)`: `0`	`border-start-start-radius`
`--sf-datepicker-day-date--color`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-date`: `var(--sf-on-surface)`	`color`
`--sf-datepicker-day-date--font-family`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-date`: `var(--sf-text--family)`	`font-family`
`--sf-datepicker-day-date--font-size`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-date`: `var(--sf-text--size)`	`font-size`
`--sf-datepicker-day-date--font-weight`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-date`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-datepicker-day-date--line-height`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-date`: `var(--sf-text--height)`	`line-height`, `top`, `inset-block`
`--sf-datepicker-day-info--color`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-info`: `var(--sf-on-surface-variant)`	`color`
`--sf-datepicker-day-info--font-family`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-info`: `var(--sf-text--family)`	`font-family`
`--sf-datepicker-day-info--font-size`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-info`: `var(--sf-text-size-1/4)`	`font-size`
`--sf-datepicker-day-info--font-weight`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-info`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-datepicker-day-info--line-height`	не задана; задают модификаторы, например `.sf-datepicker-day .sf-datepicker-day-info`: `var(--sf-text-height-1/4)`	`line-height`
`--sf-datepicker-main--background-color`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-main`: `var(--sf-transparent)`	`background-color`
`--sf-datepicker-presets--inline-size`	не задана; задают модификаторы, например `.sf-datepicker.sf-datepicker--presets`: `calc(var(--sf-ui-1--control-height) * 5)`	`width`, `inline-size`, `flex`
`--sf-datepicker-row--background-color`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-row`: `var(--sf-transparent)`	`background-color`
`--sf-datepicker-text--background-color`	не задана; задают модификаторы, например `.sf-datepicker-text`: `var(--sf-surface-0)`	`background-color`
`--sf-datepicker-text--border-end-end-radius`	не задана; задают модификаторы, например `.sf-datepicker-text.sf-datepicker-text-start`: `var(--sf-radius-square)`	`border-end-end-radius`
`--sf-datepicker-text--border-end-start-radius`	не задана; задают модификаторы, например `.sf-datepicker-text.sf-datepicker-text-end`: `var(--sf-radius-square)`	`border-end-start-radius`
`--sf-datepicker-text--border-start-end-radius`	не задана; задают модификаторы, например `.sf-datepicker-text.sf-datepicker-text-start`: `var(--sf-radius-square)`	`border-start-end-radius`
`--sf-datepicker-text--border-start-start-radius`	не задана; задают модификаторы, например `.sf-datepicker-text.sf-datepicker-text-end`: `var(--sf-radius-square)`	`border-start-start-radius`
`--sf-datepicker-text--color`	не задана; задают модификаторы, например `.sf-datepicker-text`: `var(--sf-on-surface)`	`color`
`--sf-datepicker-top--background-color`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-elevation-3--surface)`	`background-color`
`--sf-datepicker-top--padding-bottom`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1)`	`padding-bottom`
`--sf-datepicker-top--padding-inline-end`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1/3)`	`padding-inline-end`
`--sf-datepicker-top--padding-inline-start`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1/3)`	`padding-inline-start`
`--sf-datepicker-top--padding-top`	не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1)`	`padding-top`

См. также

Datepicker — Smart-компонент

Навигация

Главное

Документация

Содержание

Календарь

Пример

Разметка

Варианты

Вид дня

Ячейки месяца и года

Состояния

Выбран

Период

Недоступен

Фокус

Доступность

Классы

Переменные

См. также

Настройки

Календарь

Пример

Разметка

Варианты

Вид дня

Ячейки месяца и года

Состояния

Выбран

Период

Недоступен

Фокус

Доступность

Классы

Переменные

См. также

Поиск по документации