Calendar

A single-month date calendar.

July 2026

import { BuiCalendar } from 'ng-blatui';

<bui-calendar [(value)]="date" />

Week starts Monday

July 2026

<bui-calendar [(value)]="date" [weekStart]="1" />

Min / max range

July 2026

<bui-calendar [(value)]="date" minDate="2026-06-01" maxDate="2026-06-30" />

Disabled dates

July 2026

<!-- disable specific ISO dates -->
<bui-calendar [(value)]="date" [disabledDates]="['2026-06-10', '2026-06-16']" />

Disabled weekends

July 2026

<bui-calendar [(value)]="date" [disableWeekends]="true" />

Week numbers

July 2026

#	Sun	Mon	Tue	Wed	Thu	Fri	Sat
27
28
29
30
31
32

<bui-calendar [(value)]="date" [showWeekNumbers]="true" />

Outline days

July 2026

<!-- outline each day cell via an arbitrary child selector -->
<bui-calendar class="[&_tbody_button]:border [&_tbody_button]:border-border/60" [(value)]="date" />

Dropdown caption

<!-- captionLayout="dropdown" swaps the label for month + year selects -->
<bui-calendar [(value)]="date" captionLayout="dropdown" />

Hide outside days

July 2026

<bui-calendar [(value)]="date" [hideOutsideDays]="true" />

Range

July 2026

<!-- mode="range" binds a { start, end } range -->
<bui-calendar mode="range" [(range)]="range" />
// range = signal({ start: '', end: '' })

Multiple

July 2026

<!-- mode="multiple" binds an array of ISO dates -->
<bui-calendar mode="multiple" [(values)]="days" />
// days = signal<string[]>([])

Multiple months

July 2026

August 2026

<!-- [months]="2" renders side-by-side grids (great for ranges) -->
<bui-calendar mode="range" [months]="2" [(range)]="range" />

API reference

Inputs

Prop	Type	Default	Description
`mode`	`CalendarMode`	`'single'`	Selection mode: `single` \| `range` \| `multiple`.
`months`	`number`	`1`	Number of month grids to render side by side.
`weekStart`	`number`	—	First day of the week (0 = Sunday). Defaults to the locale's own convention — Sunday in `en-US`, Monday in `fr`, Saturday in `ar-EG`.
`minDate`	`string`	`''`	Earliest selectable date (`yyyy-mm-dd`).
`maxDate`	`string`	`''`	Latest selectable date (`yyyy-mm-dd`).
`disabledDates`	`readonly string[]`	`[]`	Specific ISO dates (yyyy-mm-dd) to disable.
`disableWeekends`	`boolean`	`false`	Disable the locale's weekend days — Saturday/Sunday in `en-US`, Friday/Saturday in `ar-EG`.
`showWeekNumbers`	`boolean`	`false`	Show an ISO week-number column on the left.
`captionLayout`	`"dropdown" \| "label"`	`'label'`	`dropdown` swaps the month label for month + year selects (single month only).
`hideOutsideDays`	`boolean`	`false`	Hide days that fall outside the current month.
`locale`	`string`	—	BCP 47 locale used for the month captions. Defaults to the app's `LOCALE_ID`.
`monthFormat`	`Intl.DateTimeFormatOptions`	`DEFAULT_MONTH_FORMAT`	`Intl.DateTimeFormat` options for the month caption. Replaces the default wholesale, so `{ dateStyle: 'short' }` and `{ month: 'long' }` are both valid (they cannot be mixed).
`weekdayFormat`	`WeekdayFormat`	`'short'`	How weekday column headers are abbreviated: each locale's own `short` form by default.
`weekdayLabels`	`readonly string[]`	—	Override the weekday column headers outright — 7 entries, Sunday first, regardless of `weekStart`. For when a locale's `Intl` abbreviation is not what your design wants.
`previousMonthLabel`	`string`	—	Accessible label for the previous-month button.
`monthSelectLabel`	`string`	—	Accessible label for the month dropdown.
`yearLabel`	`string`	—	Accessible label for the year dropdown.
`nextMonthLabel`	`string`	—	Accessible label for the next-month button.
`weekLabel`	`string`	—	Accessible label for the week-number column.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	Selected day (mode="single") as `yyyy-mm-dd`. Two-way bindable with `[(value)]`.
`range`	`CalendarRange`	`{ start: '', end: '' }`	Selected range (mode="range").
`values`	`readonly string[]`	`[]`	Selected days (mode="multiple").
`disabled`	`boolean`	`false`	Whether the whole calendar is disabled. Two-way bindable with `[(disabled)]`.

Types

CalendarMode — Selection behavior of the calendar.

"multiple" | "range" | "single"

CalendarRange

Field	Type	Description
`start`	`string`	Start date of the range, as `yyyy-mm-dd`.
`end`	`string`	End date of the range, as `yyyy-mm-dd`.

WeekdayFormat — How weekday column headers are abbreviated. `short` is each locale's native abbreviation.

"long" | "narrow" | "short"

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