Calendar

Standalone calendar with date, month, and year panels for single, multiple, and range selection.

Introduction

Calendar is a standalone date picker surface with date, month, and year panels. It renders inline (not in a popover) and supports single, multiple, and range selection out of the box.

Calendar is the building block behind the popover-based pickers—DateField and DatePicker wrap it with a text input and overlay. Reach for Calendar directly when you want the grid visible at all times, such as in a sidebar, dashboard widget, or a custom scheduling layout.

Import

import { Calendar } from "@bridge-ui/vue/Components/Calendar";

import { Calendar } from "@bridge-ui/react/Components/Calendar";

Basic usage

Bind the selection with value/onChange in React or v-model in Vue. For uncontrolled usage with an initial value, use defaultValue in React or default-value in Vue. Use viewDate (React) / view-date (Vue) to control which month is initially displayed.

Range selection

Enable range to select a start/end pair. The bound value becomes a two-item tuple [start, end]; hovering a candidate end date previews the in-between fill before the second date is committed.

For a form field built on top of range selection, see DateRangeField. For a dual-month layout with two date panels side by side, see CalendarRange.

Multiple selection

Enable multiple to allow selecting any number of individual dates. The bound value becomes an array of dates; clicking a selected date removes it from the array.

Granularity

granularity sets the deepest panel that can commit a value: day (default), month, or year. Month and year still commit a Date, on the first day of that unit. defaultView opens on that panel and is clamped so it cannot go deeper. hideMonths is ignored when granularity is month; hideYears is ignored when granularity is year.

<Calendar granularity="month" />

<Calendar granularity="year" />

Bounds and disabled dates

Restrict the selectable range with minDate and maxDate, and block individual dates with disableDates. Out-of-range and disabled tiles render with muted, non-interactive styling. Pair with disableMonths and disableYears to block entire months or years from the month/year panels.

Colors

Use the color prop to change the accent used for selected tiles across the date, month, and year panels. Available colors: primary (default), secondary, success, info, warning, error, dark, and black.

Building blocks

Calendar composes three smaller, independently usable panels—swap them in when you only need one grid instead of the full month/year-switching chrome:

• CalendarDate — the weekday header and day grid. Supports the same range/multiple selection modes as Calendar.
• CalendarMonth — a 12-tile month grid (0–11) for a given year.
• CalendarYear — a paginated year grid (pageSize years per page, default 15).

Related components

DateField, DateRangeField, DatePicker, CalendarRange

Accessibility

• The active panel (date, month, or year) exposes a header with a live text label (month/year or year-page range) and previous/next/today navigation buttons.
• Day, month, and year tiles are rendered as buttons, so they receive keyboard focus and can be activated with Enter or Space.
• Disabled and out-of-range tiles are marked non-interactive and skipped by pointer and keyboard activation alike.
• When embedding Calendar without a visible page heading nearby, add aria-label (via customProps.root) so assistive technology has context for the grid.

Anatomy

Calendar renders a header and a single body panel that swaps between date, month, and year grids:

Calendar (root)
├── Header
│   ├── Year selector — current year label, switches to the year panel
│   ├── Month selector — current month label, switches to the month panel
│   └── Nav — previous, today, and next buttons (date panel)
└── Body — active panel
    ├── CalendarDate — weekday row + day tiles (default view)
    ├── CalendarMonth — month tiles (when the month selector is active)
    └── CalendarYear — year tiles (when the year selector is active)

API

Calendar-specific

Events

CalendarMonth and CalendarYear

When used standalone, CalendarMonth and CalendarYear bind a plain number instead of a DatePickerModel:

Both share color, rounded, disabled, error, readOnly, minDate/maxDate, timeZone, and the disable lists with Calendar. CalendarMonth accepts disableDates, disableMonths, and disableYears. CalendarYear accepts disableDates and disableYears. On a commit panel, disableDates is compared at month or year precision.

When the month or year grid is the panel that commits the value, it also accepts: