))}
{start && end ? rangeFormat.formatRange(new Date(start), new Date(end)) : 'Pick departure and return'}
);
}
```
### Disabled
#### Disabled: navigation within a window
`from` and `to` on `DayPicker` disable the days outside the window, and the app disables the previous / next buttons at its first and last month. The rule is written next to the grid and linked with `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.
);
}
```
### Edge
#### Edge: compact weekday labels
Narrow weekday names repeat letters in many locales (S, M, T, W, T, F, S), so each label gets the full name in `aria-label`. `compact` with `size='xs'` keeps the shell as narrow as the grid.
```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}
))}
);
}
```
#### Edge: right-to-left shell
`dir='rtl'` on `CalendarBase` mirrors the header and the grid, but the base parts do not swap icons: the "previous" button needs a right-pointing chevron and the "next" button a left-pointing one. The `Calendar` navigation buttons flip their chevrons by themselves.
```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}
))}
);
}
```
## Anatomy
### Overview
`CalendarBase` provides the shared visual shell for calendar-family components. It supplies context to shared header, control buttons, picker buttons, and weekday labels.
### Required Parts
#### `CalendarBase`
Required. Owns shared size, variant, and compactness.
### Optional Parts
#### `CalendarBaseHeader`
Optional header row for navigation and picker triggers.
#### `CalendarBasePickerButton`
Optional button for month/year picker toggles.
#### `CalendarBaseControlIconButton`
Optional previous/next control button.
#### `CalendarBaseWeekLabels`
Optional row wrapper for weekday labels.
#### `CalendarBaseWeekLabel`
Optional weekday header cell.
### Composition Order
1. `CalendarBase`
2. optional `CalendarBaseHeader`
3. embedded picker content
4. optional `CalendarBaseWeekLabels`, inside the picker before its rows: the label row has `role='row'` and belongs to the grid
### Valid Composition Patterns
A working day calendar: the header with icon buttons and a month label, then a `DayPicker` that holds the weekday row and the layout. The app keeps the visible month and the active day.
```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}
))}
);
}
```
### Invalid Composition Patterns
#### Shared calendar parts rendered outside `CalendarBase`
They lose the size and variant context that keeps the family consistent.
#### Consumer-facing calendar built from base parts without reusing the family behavior
The visual shell may match, but interaction and semantics can drift from the higher-level calendar components.