))}
{start && end ? rangeFormat.formatRange(new Date(start), new Date(end)) : 'Pick departure and return'}
);
}
```
### Отключённый
#### Отключённый: навигация внутри окна
`from` и `to` у `DayPicker` отключают дни вне окна, а приложение отключает кнопки «назад» / «вперёд» на первом и последнем месяце. Правило написано рядом с сеткой и связано через `aria-describedby`.
```tsx
import {
CalendarBase,
CalendarBaseControlIconButton,
CalendarBaseHeader,
CalendarBaseWeekLabel,
CalendarBaseWeekLabels,
DayPicker,
DayPickerCell,
DayPickerLayout,
HelperText,
Icon,
Text,
} from '@vega-ui/react';
import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import { useId, useState } from 'react';
const LOCALE = 'en-US';
const WEEK_START = 0;
const FIRST_DAY = '2026-11-16';
const LAST_DAY = '2027-01-15';
const weekdayFormat = new Intl.DateTimeFormat(LOCALE, { weekday: 'short', timeZone: 'UTC' });
const monthFormat = new Intl.DateTimeFormat(LOCALE, { month: 'long', year: 'numeric', timeZone: 'UTC' });
const weekdays = Array.from({ length: 7 }, (_, index) => weekdayFormat.format(Date.UTC(2026, 10, 1 + WEEK_START + index)));
function addMonths(month: string, amount: number) {
const date = new Date(month);
date.setUTCMonth(date.getUTCMonth() + amount);
return date.toISOString().slice(0, 10);
}
function getMonthStart(day: string) {
return `${day.slice(0, 7)}-01`;
}
export default function NavigationWithinAWindow() {
const [month, setMonth] = useState(getMonthStart(FIRST_DAY));
const [active, setActive] = useState(FIRST_DAY);
const hintId = useId();
const isFirstMonth = month === getMonthStart(FIRST_DAY);
const isLastMonth = month === getMonthStart(LAST_DAY);
const showMonth = (amount: number) => {
const next = addMonths(month, amount);
setMonth(next);
setActive(next < FIRST_DAY ? FIRST_DAY : next);
};
return (
showMonth(-1)}>
{monthFormat.format(new Date(month))} showMonth(1)}>
{weekdays.map((weekday) => (
{weekday}
))}
Returns are accepted from November 16 to January 15.
);
}
```
### Пограничный случай
#### Пограничный случай: компактные подписи дней недели
Узкие названия дней недели во многих локалях повторяют буквы (S, M, T, W, T, F, S), поэтому каждая подпись получает полное название в `aria-label`. `compact` с `size='xs'` держит оболочку не шире сетки.
```tsx
import {
CalendarBase,
CalendarBaseWeekLabel,
CalendarBaseWeekLabels,
DayPicker,
DayPickerCell,
DayPickerLayout,
} from '@vega-ui/react';
const LOCALE = 'en-US';
const WEEK_START = 0;
const narrowFormat = new Intl.DateTimeFormat(LOCALE, { weekday: 'narrow', timeZone: 'UTC' });
const longFormat = new Intl.DateTimeFormat(LOCALE, { weekday: 'long', timeZone: 'UTC' });
const weekdays = Array.from({ length: 7 }, (_, index) => {
const date = Date.UTC(2026, 10, 1 + WEEK_START + index);
return { narrow: narrowFormat.format(date), long: longFormat.format(date) };
});
export default function CompactWeekdayLabels() {
return (
{weekdays.map(({ narrow, long }) => (
{narrow}
))}
);
}
```
#### Пограничный случай: оболочка справа налево
`dir='rtl'` на `CalendarBase` отражает заголовок и сетку, но базовые части не меняют иконки местами: кнопке «назад» нужен шеврон вправо, а кнопке «вперёд» — влево. Кнопки навигации `Calendar` разворачивают шевроны сами.
```tsx
import {
CalendarBase,
CalendarBaseControlIconButton,
CalendarBaseHeader,
CalendarBaseWeekLabel,
CalendarBaseWeekLabels,
DayPicker,
DayPickerCell,
DayPickerLayout,
Icon,
Text,
} from '@vega-ui/react';
import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import { useState } from 'react';
const LOCALE = 'he-IL';
const WEEK_START = 0;
const weekdayFormat = new Intl.DateTimeFormat(LOCALE, { weekday: 'narrow', timeZone: 'UTC' });
const monthFormat = new Intl.DateTimeFormat(LOCALE, { month: 'long', year: 'numeric', timeZone: 'UTC' });
const weekdays = Array.from({ length: 7 }, (_, index) => weekdayFormat.format(Date.UTC(2026, 10, 1 + WEEK_START + index)));
function addMonths(month: string, amount: number) {
const date = new Date(month);
date.setUTCMonth(date.getUTCMonth() + amount);
return date.toISOString().slice(0, 10);
}
export default function RightToLeftShell() {
const [month, setMonth] = useState('2026-11-01');
const [active, setActive] = useState('2026-11-01');
const showMonth = (amount: number) => {
const next = addMonths(month, amount);
setMonth(next);
setActive(next);
};
return (
showMonth(-1)}>
{monthFormat.format(new Date(month))} showMonth(1)}>
{weekdays.map((weekday, col) => (
{weekday}
))}
);
}
```
## Анатомия
### Обзор
`CalendarBase` даёт общую визуальную оболочку для компонентов семейства календаря. Он передаёт контекст общему заголовку, кнопкам управления, кнопкам пикера и подписям дней недели.
### Обязательные части
#### `CalendarBase`
Обязательна. Отвечает за общий размер, вариант и компактность.
### Необязательные части
#### `CalendarBaseHeader`
Необязательная строка заголовка для навигации и триггеров пикера.
#### `CalendarBasePickerButton`
Необязательная кнопка для переключения пикера месяца/года.
#### `CalendarBaseControlIconButton`
Необязательная кнопка «назад»/«вперёд».
#### `CalendarBaseWeekLabels`
Необязательная обёртка-строка для подписей дней недели.
#### `CalendarBaseWeekLabel`
Необязательная ячейка заголовка дня недели.
### Порядок композиции
1. `CalendarBase`
2. необязательный `CalendarBaseHeader`
3. встроенное содержимое пикера
4. необязательный `CalendarBaseWeekLabels` внутри пикера перед его строками: у строки подписей `role='row'`, и она принадлежит сетке
### Допустимые паттерны композиции
Рабочий календарь дней: заголовок с кнопками-иконками и подписью месяца, затем `DayPicker`, в котором строка дней недели и раскладка. Видимый месяц и активный день хранит приложение.
```tsx
import {
CalendarBase,
CalendarBaseControlIconButton,
CalendarBaseHeader,
CalendarBaseWeekLabel,
CalendarBaseWeekLabels,
DayPicker,
DayPickerCell,
DayPickerLayout,
Icon,
Text,
} from '@vega-ui/react';
import { ChevronLeft, ChevronRight } from '@vega-ui/icons';
import { useState } from 'react';
const LOCALE = 'en-GB';
const WEEK_START = 1;
const weekdayFormat = new Intl.DateTimeFormat(LOCALE, { weekday: 'short', timeZone: 'UTC' });
const monthFormat = new Intl.DateTimeFormat(LOCALE, { month: 'long', year: 'numeric', timeZone: 'UTC' });
const weekdays = Array.from({ length: 7 }, (_, index) => weekdayFormat.format(Date.UTC(2026, 10, 1 + WEEK_START + index)));
function addMonths(month: string, amount: number) {
const date = new Date(month);
date.setUTCMonth(date.getUTCMonth() + amount);
return date.toISOString().slice(0, 10);
}
export default function DayCalendarFromBaseParts() {
const [month, setMonth] = useState('2026-11-01');
const [active, setActive] = useState('2026-11-01');
const [selected, setSelected] = useState(null);
const showMonth = (amount: number) => {
const next = addMonths(month, amount);
setMonth(next);
setActive(next);
};
return (
showMonth(-1)}>
{monthFormat.format(new Date(month))}
showMonth(1)}>
{weekdays.map((weekday) => (
{weekday}
))}
);
}
```
### Недопустимые паттерны композиции
#### Общие части календаря отрендерены вне `CalendarBase`
Они теряют контекст размера и варианта, который сохраняет единообразие семейства.
#### Календарь для пользователей собран из базовых частей без повторного использования поведения семейства
Визуальная оболочка может совпадать, но взаимодействие и семантика могут разойтись с компонентами календаря более высокого уровня.