Calendar

import { BuiCalendar } from 'ng-blatui';

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

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

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

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

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

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

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

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

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

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

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

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