Business Calendar for Angular

import { AuiBusinessCalendar } from '@absoluteui/angular/business-calendar';

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

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

Example

import { Component } from '@angular/core';
import { plainDate } from '@absoluteui/core';
import type { BusinessCalendarChangeDetail, BusinessCalendarDefinition } from '@absoluteui/components/business-calendar';
import { AuiBusinessCalendar } from '@absoluteui/angular/business-calendar';

@Component({
  selector: 'app-office-days',
  imports: [AuiBusinessCalendar],
  template: `<aui-business-calendar label="Office" [definition]="definition" [editable]="true" [months]="6" (changed)="save($event)"></aui-business-calendar>`,
})
export class OfficeDaysComponent {
  definition: BusinessCalendarDefinition = { holidays: [{ date: plainDate(2026, 1, 1), name: "New Year's Day", yearly: true }] };

  save(detail: BusinessCalendarChangeDetail): void {
    this.definition = detail.definition;
  }
}

<aui-business-calendar>

Class AuiBusinessCalendar; template reference #ref="auiBusinessCalendar".

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

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name; each grid is named “{label}, {month year}”.
definition	BusinessCalendarDefinition	'[object Object]'	Working days (default Monday to Friday), hours (default 09:00 to 17:00), weekday hours, holidays, and exceptions. Validated (BUSINESS_CALENDAR_DEFINITION).
focusedDate	PlainDate		Initially focused day. Default: today.
editable	boolean	false	Enter, Space, or a click toggles a day between working and non-working (an exception).
firstDayOfWeek	IsoWeekday		First column (1 = Monday). Default: the locale’s first day of week.
today	PlainDate		Advanced: fixed “today” for tests and demos.
icons	Partial<BusinessCalendarIcons>		Icon slot overrides.
months	number	'3'	Consecutive months shown, 1 to 12; the previous/next buttons page by this many.
showLegend	boolean	true	Show the legend of day kinds.
showHolidays	boolean	true	List the holidays of the visible months.
locale	string	'en-US'	Month and weekday names, dates, numbers, the first day of the week, and messages.
timezone	string	'UTC'	IANA timezone of “today” (never the host machine zone).
direction	"ltr" | "rtl"	'ltr'	Reading direction; Left/Right arrow keys and chevrons follow it.

Two-way bindings

Model	Type	Change output	Description
[(month)]	PlainYearMonth	(monthChange)	First visible month. Default: the month of the focused date.

Outputs

Output	Payload	Description
(changed)	BusinessCalendarChangeDetail	Edit mode: the user toggled a day; definition is the updated definition. Re-emits aui-change.
(daySelected)	BusinessCalendarDaySelectDetail	The user activated a day (click, Enter, or Space), in both modes. Re-emits aui-day-select.
(navigate)	BusinessCalendarNavigateDetail	The visible months changed by user action. Re-emits aui-navigate.

Methods

Call them through a viewChild query or a template reference.

Method	Description
goTo(date: PlainDate): void	Show a date and make it the focused day (no events).
setWorking(date: PlainDate, working: boolean): void	Programmatic edit (no events): adds, or removes when redundant, an exception.
focus(): void	Focus the focused day.