Scheduler

A week/day calendar of events.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

Standup

Design review

Lunch

1:1

import { BuiScheduler } from 'ng-blatui';

<bui-scheduler [events]="events" [startHour]="8" [endHour]="18" />

Day view

Today

8 AM

9 AM

10 AM

11 AM

12 PM

1 PM

2 PM

3 PM

Standup

<bui-scheduler [events]="events" view="day" [startHour]="8" [endHour]="16" />

Prop	Type	Default	Description
`events`	`readonly SchedulerEvent[]`	`[]`	Events to position within the calendar grid.
`days`	`readonly string[]`	`[]`	Custom day-column headers; empty falls back to weekday names or `Today`.
`startHour`	`number`	`8`	First hour shown on the time axis (24-hour).
`endHour`	`number`	`18`	Last hour shown on the time axis (24-hour), exclusive of the final row.
`view`	`"day" \| "week"`	`'week'`	Layout mode; `day` shows a single column, `week` shows the full week.
`label`	`string`	`'Schedule'`	Accessible label applied to the grid's `aria-label`.

SchedulerEvent

Field	Type	Description
`title`	`string`	Event label rendered inside the positioned block.
`day`	`number`	Zero-based column index selecting which day the event belongs to.
`start`	`string`	Start time as an `HH:mm` string; positions the block's top edge.
`end`	`string`	End time as an `HH:mm` string; together with `start` sets the block height.
`color`?	`string`	Tailwind background class for the block; defaults to `bg-primary`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.