Recurrence Picker for Angular

import { AuiRecurrencePicker } from '@absoluteui/angular/recurrence-picker';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { parseRecurrenceRule, plainDate, type RecurrenceRule } from '@absoluteui/core';
import { AuiRecurrencePicker } from '@absoluteui/angular/recurrence-picker';

@Component({
  selector: 'app-repeat',
  imports: [ReactiveFormsModule, AuiRecurrencePicker],
  template: `<aui-recurrence-picker label="Repeat" [start]="start" [formControl]="rule"></aui-recurrence-picker>`,
})
export class RepeatComponent {
  readonly start = plainDate(2026, 9, 29);
  readonly rule = new FormControl<RecurrenceRule | null>(parseRecurrenceRule('FREQ=WEEKLY;BYDAY=TU'));
}

`<aui-recurrence-picker>`

Class AuiRecurrencePicker; template reference #ref="auiRecurrencePicker".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is RecurrenceRule \| 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; it stays the accessible name.
`start`	`PlainDate \| PlainDateTime \| null`		Series start: defaults, the minimum end date, and the preview.
`frequencies`	`readonly RecurrenceFrequency[]`		Frequencies offered. Default all four.
`maxInterval`	`number`	`'99'`	Largest interval.
`maxCount`	`number`	`'999'`	Largest occurrence count.
`name`	`string`		Form field name of the hidden input (iCalendar text).
`description`	`string`		Help text referenced by the fieldset.
`required`	`boolean`	`false`	“Does not repeat” is invalid.
`disabled`	`boolean`	`false`	Disables every control; not submitted.
`firstDayOfWeek`	`IsoWeekday`		First weekday toggle. Default: the locale’s first day of week.
`validate`	`(value: RecurrenceRule \| null) => string \| null`		Consumer validation after built-in checks.
`icons`	`Partial<RecurrencePickerIcons>`		Icon slot overrides.
`validationTiming`	`ValidationTiming`	`'blur'`	When validation messages first appear.
`previewCount`	`number`	`'5'`	Next occurrences listed under the summary (needs start); 0 hides the preview.
`locale`	`string`	`'en-US'`	Month and weekday names, dates, numbers, the first day of the week, and messages.
`timezone`	`string`	`'UTC'`	Timezone of the start wall-clock time, the preview, and UNTIL.
`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)]`	`RecurrenceRule \| null`	`(valueChange)`	The value: `[(value)]` without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
`(changed)`	`RecurrencePickerChangeDetail`	The user changed the rule 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 when the user edits.
`getFormValue(): string \| null \| undefined`	iCalendar text, or null when not repeating or invalid.
`focus(): void`	Focus the frequency select.
`reset(): void`	Restore the initial value and clear state (no events).