Scheduler for Angular

import { AuiScheduler } from '@absoluteui/angular/scheduler';

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

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

Example

import { Component } from '@angular/core';
import type { SchedulerEvent, SchedulerEventChangeDetail, SchedulerSlotActivateDetail } from '@absoluteui/components/scheduler';
import { AuiScheduler } from '@absoluteui/angular/scheduler';

@Component({
  selector: 'app-calendar',
  imports: [AuiScheduler],
  template: `<aui-scheduler label="Team" [events]="events" [editable]="true" view="workWeek" timezone="Europe/London"
    (eventChange)="events = $event.events" (slotActivated)="create($event)"></aui-scheduler>`,
})
export class CalendarComponent {
  events: SchedulerEvent[] = [];

  create(slot: SchedulerSlotActivateDetail): void {
    // open an editor for slot.start .. slot.end
  }

  saved(detail: SchedulerEventChangeDetail): number {
    return detail.changes.updated.length;
  }
}

<aui-scheduler>

Class AuiScheduler; template reference #ref="auiScheduler".

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

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name; grids are named “{label}, {period}”.
loadEvents	(range: SchedulerRange, signal: AbortSignal) => Promise<readonly SchedulerEvent[]>		Range data source instead of events (single events overlapping the range, series masters that may occur in it, and their exceptions).
resources	readonly SchedulerResource[]		Timeline rows: { id, label, description?, color? }.
views	readonly SchedulerView[]		Views in the switcher. Default: day, week, work week, month, agenda (plus timeline with resources).
editable	boolean	false	Move and resize events (pointer, keyboard, toolbar).
recurringEditScope	"ask" | SchedulerEditScope	'ask'	How changes to recurring occurrences apply; ask shows a dialog.
businessCalendar	BusinessCalendarDefinition		Working days (work week), working hours (shading), holidays (headers).
firstDayOfWeek	IsoWeekday		First day of weeks. Default: the locale’s first day of week.
createId	(base: Readonly<SchedulerEvent>, hint: string) => string		Id of events created from base (exceptions, split series). Default “{id}~{hint}”.
renderEvent	(occurrence: SchedulerOccurrence, context: SchedulerRenderContext) => Node		Event content (non-interactive).
now	Instant		Advanced: fixed current time (tests, demos); disables the per-minute refresh.
icons	Partial<SchedulerIcons>		Icon slot overrides.
slotDuration	15 | 30 | 60	'30'	Minutes per slot (time view rows, day timeline columns).
snapDuration	number	'15'	Minutes moves and resizes snap to.
dayStartHour	number	'0'	First hour shown in time views (0-23).
dayEndHour	number	'24'	Last hour shown, exclusive (1-24, after dayStartHour).
scrollToHour	number	'8'	Hour scrolled into view (and focused) when a time view opens.
monthEventLimit	number	'3'	Rows of events per month cell before “+N more”.
agendaDays	number	'7'	Days listed by the agenda (1-62).
timelineScale	SchedulerTimelineScale	'day'	Timeline columns: slots of a day, days of a week, or days of a month.
requestTimeoutMs	number	'30000'	loadEvents timeout.
historyLimit	number	'50'	Undo depth (0 disables undo).
locale	string	'en-US'	Month and weekday names, dates, numbers, the first day of the week, and messages.
timezone	string	'UTC'	Timezone of the layout, today, slots, and new times.
disambiguation	Disambiguation	'compatible'	DST policy for wall-clock times in a gap or overlap.
direction	Direction	'ltr'	Reading direction; Left/Right arrow keys and chevrons follow it.

Two-way bindings

Model	Type	Change output	Description
[(events)]	readonly SchedulerEvent[]	(eventsChange)	Events: { id, title, start: Instant | PlainDate, end (exclusive instant or inclusive last day), timeZone?, recurrence?, seriesId?, originalStart?, resourceId?, color?, location?, description?, readOnly? }.
[(view)]	SchedulerView	(viewChange)	Current view.
[(date)]	PlainDate	(dateChange)	A day in the visible period. Default: today in the timezone.

Outputs

Output	Payload	Description
(navigate)	SchedulerNavigateDetail	The user changed the view or period. Re-emits aui-navigate.
(slotActivated)	SchedulerSlotActivateDetail	The user asked to create an event (Enter on an empty cell, Shift+Enter, a selection, a pointer range, or a double-click). Re-emits aui-slot-activate.
(eventActivated)	SchedulerEventActivateDetail	The user activated an event (click, Enter, Space). Re-emits aui-event-activate.
(eventChange)	SchedulerEventChangeDetail	Before a change is applied; preventDefault() refuses it. Re-emits aui-event-change.
(eventDeleted)	SchedulerEventDeleteDetail	Delete or Backspace on an editable event (the application removes it). Re-emits aui-event-delete.
(loadError)	SchedulerLoadErrorDetail	loadEvents failed, timed out, or returned invalid events. Re-emits aui-load-error.

Read-only state

Property	Type	Description
canUndo	Signal<boolean>	History state.
canRedo	Signal<boolean>	History state.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setView(view: SchedulerView): void	Change the view (no aui-navigate).
goTo(date: PlainDate): void	Change the period (next and previous emit aui-navigate).
next(): void	Change the period (next and previous emit aui-navigate).
previous(): void	Change the period (next and previous emit aui-navigate).
today(): void	Change the period (next and previous emit aui-navigate).
refresh(): void	Discard cached ranges and reload the visible range.
moveEvent(key: string, start: PlainDate | Instant, options?: { resourceId?: string; scope?: SchedulerEditScope; } | undefined): boolean | undefined	Programmatic move of a visible occurrence (emits the cancelable aui-event-change; false when refused).
resizeEvent(key: string, end: PlainDate | Instant, options?: { scope?: SchedulerEditScope; } | undefined): boolean | undefined	Programmatic end change.
undo(): boolean | undefined	Step through edits (emit aui-event-change with reason undo/redo).
redo(): boolean | undefined	Step through edits (emit aui-event-change with reason undo/redo).
focus(): void	Focus the current cell or event.

Templates

Customize rendering with AuiItem from @absoluteui/angular/templates.