Free
Pro

Calendar

The Base UI (Angular) calendar is a signal-driven month grid for a single date or a range. Copy it in with the CLI; keyboard arrows move between days. Pair it with the Pro datepicker overlay when you need an input that opens a popover instead of an inline grid.

When to use

  • Scheduling UIs that should show a full month without an overlay.
  • Range selection (check-in / check-out) on the same grid.

When not to use

  • A compact field that opens a popup — use datepicker (Pro) or date-range-picker.
  • Time of day only — use time-picker, or datepicker with showTime.

Install with npx base-ui-cli add calendar.

freeDate pickers · Pro

Datepicker — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Single Date Selection

Default mode allowing selection of a single date.

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Selected Date: Saturday, August 29, 2026

HTML

Date Range Selection

Set mode="range" to enable selecting a start and end date.

August 2026

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
Start: Aug 29, 2026
End: Sep 5, 2026

HTML

Date Picker

An input-based date picker that uses an overlay to display the calendar.

ß
Current Value: None

HTML

Date and time

Set showTime on the Pro datepicker for a two-step flow: pick a date, choose a time, then apply — binding a full Date with hours and minutes.

Playground

HTML

<base-datepicker
  showTime
  hourCycle="24"
  [(ngModel)]="when">
</base-datepicker>

Date Range Picker

An input-based range picker for selecting start and end dates.

Selected: ... → ...

HTML

Keyboard & accessibility

Role
Grid with column headers. The focused day is the only tab stop in the grid (roving tabindex).
Focus
Month buttons are in tab order. Arrow keys move day focus without leaving the grid.

Shortcuts

  • Arrow keysMove the focused day
  • HomeFirst day of the month
  • EndLast day of the month
  • PageUpPrevious month
  • PageDownNext month
  • EnterSelect the focused day

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add calendar

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add calendar
// Paths are relative to aliases.components (default: src/app/components)
import { CalendarComponent, CalendarDate } from './calendar/calendar.component';

@Component({
  selector: 'app-your-component',
  imports: [
    CalendarComponent
  ],
  template: `...`
})
export class YourComponent {}

API for calendar — generated from JSDoc in the library source.

API reference for calendar
APIMemberTypeDefaultDescription
CalendarDatedateDate — —
CalendarDateisTodayboolean — —
CalendarDateisCurrentMonthboolean — —
CalendarDateisSelectedboolean — —
CalendarDateisInRangeboolean — —
CalendarDateisRangeStartboolean — —
CalendarDateisRangeEndboolean — —
base-calendarclassstring''Additional CSS classes to merge into the host element.
base-calendarpanelIdunknown`base-calendar-grid-${++calendarIdCounter}`ID for the calendar grid, used by combobox aria-controls on date pickers.
base-calendarmode'single' | 'range''single'The selection mode. 'single' allows picking one day, 'range' allows picking start and end dates.
base-calendarselectedDateDate | nullnullThe currently selected date (only used in 'single' mode).
base-calendarrangeStartDate | nullnullThe start date of the selected range (only used in 'range' mode).
base-calendarrangeEndDate | nullnullThe end date of the selected range (only used in 'range' mode).
base-calendar(dateSelected)Date — Emits the selected Date when mode is 'single' and a day is clicked.
base-calendar(rangeSelected){ start: Date | null; end: Date | null; } — Emits an object containing start and end Dates when mode is 'range' and a day is clicked.