Calendar for Angular

import { AuiCalendar } from '@absoluteui/angular/calendar';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Calendar page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { calendar: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import type { PlainDate } from '@absoluteui/core';
import { AuiCalendar } from '@absoluteui/angular/calendar';

@Component({
  selector: 'app-booking',
  imports: [ReactiveFormsModule, AuiCalendar],
  template: `<aui-calendar label="Appointment date" [firstDayOfWeek]="1" [formControl]="date"></aui-calendar>`,
})
export class BookingComponent {
  readonly date = new FormControl<PlainDate | null>(null);
}

<aui-calendar>

Class AuiCalendar; template reference #ref="auiCalendar".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor; the form value is PlainDate \| null. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
selectionMode	CalendarSelectionMode	'single'	Since 0.3.0. ‘range’: the first pick sets an anchor, the second completes the range (in either order); value is not used.
range	Range<PlainDate> | null	null	Since 0.3.0. Selected inclusive range in range mode (start <= end).
minDays	number		Since 0.3.0. Range mode: minimum range length in days, counting the first and last day (integer 1-100000); shorter ends are disabled while the anchor is pending.
maxDays	number		Since 0.3.0. Range mode: maximum range length in days, counting the first and last day (integer 1-100000); longer ends are disabled while the anchor is pending.
visibleMonths	number	'1'	Since 0.3.0. Consecutive months shown side by side (integer 1-3). Outside days are never shown with more than one month.
min	PlainDate | null		Inclusive lower bound; earlier days are disabled and focus never moves before it.
max	PlainDate | null		Inclusive upper bound.
isDateDisabled	(date: PlainDate) => boolean		Disable individual days (focusable, not selectable).
businessCalendar	BusinessCalendarEngine | null		Business calendar (since 0.9.0): non-working days and holidays are marked and named in the calendar.
disableNonWorking	boolean	false	With businessCalendar: non-working days cannot be picked or typed (since 0.9.0).
focusedDate	PlainDate		Initially focused day and visible month. Default: value, else the range start, else today (clamped to min/max).
firstDayOfWeek	Weekday		ISO weekday of the first column (1 = Monday, 7 = Sunday). Default: the locale’s first day of week.
label	string		Grid accessible name. Default: the visible month-year heading (aria-labelledby). With several months each grid is named ‘{label}, {month}’.
today	PlainDate		Advanced: fixed ‘today’ instead of the current date in timezone (tests, server rendering).
icons	Partial<CalendarIcons>		Icon slot overrides; mirrored in RTL.
showOutsideDays	boolean	true	Show days of the adjacent months in the first and last week (one visible month only).
showWeekNumbers	boolean	false	Show ISO 8601 week numbers as row headers.
locale	string	'en-US'	Heading, weekday names, day numbers, cell names, and first day of week.
timezone	string	'UTC'	Zone used only to determine today.
direction	"ltr" | "rtl"	'ltr'	Grid direction and ArrowLeft/ArrowRight mirroring.

Two-way bindings

Model	Type	Change output	Description
[(value)]	PlainDate | null	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	CalendarChangeDetail	Single mode: the user selected a day (click, Enter, or Space), including re-selecting the current day. Range mode: the user picked the last day; range is the completed range (the first pick emits nothing). Re-emits aui-change.
(navigate)	CalendarNavigateDetail	The user changed the visible months (keyboard, month buttons, or an outside day); month is the first visible month. Re-emits aui-navigate.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setRange(range: Range<PlainDate> | null): void	Since 0.3.0. Range mode: programmatic range (no events); a pending anchor is discarded and the first day becomes the focused day.
goTo(date: PlainDate): void	Show the month of date (scrolling the visible months as needed) and make it the focused day (no events).
focus(): void	Move DOM focus to the focused day.