CalendarBase

CalendarBase is the shared layout and context foundation for the VegaUI calendar family.

Overview

CalendarBase styling is mostly layout-driven. It sets the outer shell and lets shared controls inherit size and variant through context rather than exposing a large component-local CSS API.

Public CSS Variables

There are no significant public --calendar-base-* variables in the current implementation.

The shared parts primarily consume existing system tokens:

MoTuWeThFrSaSu

Variable	Value	Affects
vertical spacing between calendar sectionsroot gap		No visible change in this state
muted weekday toneweekday label		No visible change in this state
minimum label heightweekday label		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

For the theme layer behind these values, see Themes and Tokens.

Part-Level Variables

Root

Uses grid layout and optional compact width behavior.

Uses flex row layout with small padding.

Week Labels

Use a 7-column grid and centered muted text.

CalendarBasePickerButton and CalendarBaseControlIconButton mostly inherit their visual contract from shared button primitives.

State And Variant Interaction

Size and variant flow into the shared button and text primitives through context.
compact constrains width to min-content.
CalendarBase should stay visually aligned with the picker layer rendered inside it rather than introducing a separate visual theme.

Examples

Size and variant through context

size and variant are set once on CalendarBase and reach the header buttons and the weekday labels through context. The embedded picker does not read that context, so it gets the same size and variant itself.

LTRRTL

size-and-variant.tsx · 73 lines

import {
  CalendarBase,
  CalendarBaseControlIconButton,
  CalendarBaseHeader,
  CalendarBasePickerButton,
  CalendarBaseWeekLabel,
  CalendarBaseWeekLabels,
  DayPicker,
  DayPickerCell,
  DayPickerLayout,
  Icon,
} from '@vega-ui/react';

Do Not Override

inventing a separate calendar-base token API when the implementation relies mostly on shared primitives
styling base parts in ways that break consistency with the rest of the calendar family