Schedule Picker for Angular

import { AuiSchedulePicker } from '@absoluteui/angular/schedule-picker';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import type { ScheduleValue } from '@absoluteui/components/schedule-picker';
import { AuiSchedulePicker } from '@absoluteui/angular/schedule-picker';

@Component({
  selector: 'app-when',
  imports: [ReactiveFormsModule, AuiSchedulePicker],
  template: `<aui-schedule-picker label="When" [recurrence]="true" [timeZones]="zones" [formControl]="when"></aui-schedule-picker>`,
})
export class WhenComponent {
  readonly zones = ['Europe/London', 'America/New_York'];
  readonly when = new FormControl<ScheduleValue | null>(null);
}

<aui-schedule-picker>

Class AuiSchedulePicker; template reference #ref="auiSchedulePicker".

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

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

Inputs

Input	Type	Default	Description
label	string		Required. Legend of the fieldset (required accessible name).
hideLabel	boolean	false	Visually hide the legend.
allowAllDay	boolean	true	Offer the all-day checkbox.
timeZones	readonly string[]		Timezones offered in a select; omitted: no select.
recurrence	boolean	false	Embed a Recurrence Picker (read at creation).
name	string		Form field name of the hidden input (iCalendar text).
description	string		Help text referenced by the fieldset.
required	boolean	false	An empty schedule is invalid.
disabled	boolean	false	Disables every part; not submitted.
firstDayOfWeek	IsoWeekday		First column of the calendars and weekday toggles.
validate	(value: ScheduleValue | null) => string | null		Consumer validation after built-in checks.
icons	Partial<SchedulePickerIcons>		Icon slot overrides.
validationTiming	ValidationTiming	'blur'	When validation messages first appear.
defaultDuration	number	'60'	Minutes of a new timed schedule after switching off all-day.
locale	string	'en-US'	Month and weekday names, dates, numbers, the first day of the week, and messages.
timezone	string	'UTC'	Timezone of the wall-clock times when the value has none and no select is shown.
disambiguation	Disambiguation	'compatible'	DST policy for wall-clock times in a gap or overlap.
direction	"ltr" | "rtl"	'ltr'	Reading direction; Left/Right arrow keys and chevrons follow it.

Two-way bindings

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

Outputs

Output	Payload	Description
(changed)	SchedulePickerChangeDetail	The user changed a part of the schedule or its validity error. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
reportValidity(): boolean | undefined	Show messages now and return validity.
setCustomError(message: string | null): void	External error; cleared on the next edit.
getFormValue(): string | null | undefined	iCalendar text, or null.
focus(): void	Focus the start.
reset(): void	Restore the initial value.