# Calendar Use `ui-calendar` when users need a visible calendar surface instead of a compact field. It works for booking, review scheduling, availability picking, and range selection where the month context matters and the user benefits from seeing adjacent days. ## Import ```ts import { CalendarComponent, type CalendarDay, type CalendarView } from 'ui'; ``` ## Basic single-date selection ```ts import { Component, computed, signal } from '@angular/core'; import { ButtonComponent, CalendarComponent, CalendarDay } from 'ui'; @Component({ selector: 'app-calendar-basic-demo', standalone: true, imports: [ButtonComponent, CalendarComponent], template: `
Clear date {{ summary() }}
`, }) export class CalendarBasicDemoComponent { protected readonly currentMonth = signal(new Date(2026, 4, 1)); protected readonly selectedDate = signal(new Date(2026, 4, 14)); protected readonly summary = computed(() => this.selectedDate() ? `Selected date: ${this.selectedDate()!.toLocaleDateString('en-US', { dateStyle: 'medium' })}` : 'No date selected.', ); protected onDateSelect(day: CalendarDay): void { this.selectedDate.set(day.date); } protected shiftMonth(delta: number): void { const next = new Date(this.currentMonth()); next.setMonth(next.getMonth() + delta); this.currentMonth.set(next); } protected reset(): void { this.selectedDate.set(null); this.currentMonth.set(new Date(2026, 4, 1)); } } ``` ## Days, months, and years views ```ts import { Component, signal } from '@angular/core'; import { CalendarComponent, CalendarDay, CalendarView } from 'ui'; @Component({ selector: 'app-calendar-views-demo', standalone: true, imports: [CalendarComponent], template: `
Days view
Months view
Years view
`, }) export class CalendarViewsDemoComponent { protected readonly selectedDate = signal(new Date(2026, 4, 14)); protected readonly daysMonth = signal(new Date(2026, 4, 1)); protected readonly monthsMonth = signal(new Date(2026, 4, 1)); protected readonly yearsMonth = signal(new Date(2026, 4, 1)); protected readonly daysView = signal('days'); protected readonly monthsView = signal('months'); protected readonly yearsView = signal('years'); protected onDateSelect(day: CalendarDay): void { this.selectedDate.set(day.date); } protected onMonthSelect(monthIndex: number): void { const next = new Date(this.monthsMonth()); next.setMonth(monthIndex); this.monthsMonth.set(next); } protected onYearSelect(year: number): void { const next = new Date(this.yearsMonth()); next.setFullYear(year); this.yearsMonth.set(next); } protected shiftMonth(target: ReturnType>, delta: number): void { const next = new Date(target()); next.setMonth(next.getMonth() + delta); target.set(next); } protected shiftYear(target: ReturnType>, delta: number): void { const next = new Date(target()); next.setFullYear(next.getFullYear() + delta); target.set(next); } protected setView(target: ReturnType>, view: CalendarView): void { target.set(view); } } ``` ## Sizes and month or year picker ```ts import { Component, signal } from '@angular/core'; import { CalendarComponent, CalendarDay } from 'ui'; @Component({ selector: 'app-calendar-size-picker-demo', standalone: true, imports: [CalendarComponent], template: `
@for (item of examples; track item.title) {
{{ item.title }}
{{ item.note }}
}
`, }) export class CalendarSizePickerDemoComponent { protected readonly currentMonth = signal(new Date(2026, 4, 1)); protected readonly selectedDate = signal(new Date(2026, 4, 18)); protected readonly examples = [ { title: 'Small with picker', note: 'Compact date selection inside denser forms or filters.', size: 'small' as const, showMonthYearPicker: true, }, { title: 'Medium without picker', note: 'Keeps the header quieter when month switching should stay button driven.', size: 'medium' as const, showMonthYearPicker: false, }, { title: 'Large with picker', note: 'Useful for touch-friendly or emphasized scheduling surfaces.', size: 'large' as const, showMonthYearPicker: true, }, ]; protected onDateSelect(day: CalendarDay): void { this.selectedDate.set(day.date); } protected shiftMonth(delta: number): void { const next = new Date(this.currentMonth()); next.setMonth(next.getMonth() + delta); this.currentMonth.set(next); } } ``` ## Min and max constraints ```ts import { Component, computed, signal } from '@angular/core'; import { ButtonComponent, CalendarComponent, CalendarDay } from 'ui'; @Component({ selector: 'app-calendar-constraints-demo', standalone: true, imports: [ButtonComponent, CalendarComponent], template: `
Reset window Allowed dates: {{ minDate }} to {{ maxDate }}
{{ summary() }}
`, }) export class CalendarConstraintsDemoComponent { protected readonly minDate = '2026-05-12'; protected readonly maxDate = '2026-05-26'; protected readonly currentMonth = signal(new Date(2026, 4, 1)); protected readonly selectedDate = signal(new Date(2026, 4, 14)); protected readonly summary = computed(() => this.selectedDate() ? `Chosen date: ${this.selectedDate()!.toLocaleDateString('en-US', { dateStyle: 'medium' })}` : 'Select any available date inside the allowed window.', ); protected onDateSelect(day: CalendarDay): void { this.selectedDate.set(day.date); } protected shiftMonth(delta: number): void { const next = new Date(this.currentMonth()); next.setMonth(next.getMonth() + delta); this.currentMonth.set(next); } protected reset(): void { this.currentMonth.set(new Date(2026, 4, 1)); this.selectedDate.set(new Date(2026, 4, 14)); } } ``` ## Range selection with hover preview ```ts import { Component, computed, signal } from '@angular/core'; import { ButtonComponent, CalendarComponent, CalendarDay } from 'ui'; @Component({ selector: 'app-calendar-range-demo', standalone: true, imports: [ButtonComponent, CalendarComponent], template: `
Reset range Pick a start date, then an end date.
{{ summary() }}
`, }) export class CalendarRangeDemoComponent { protected readonly currentMonth = signal(new Date(2026, 6, 1)); protected readonly startDate = signal(new Date(2026, 6, 10)); protected readonly endDate = signal(new Date(2026, 6, 14)); protected readonly hoveredDate = signal(null); protected readonly activeSelection = signal<'start' | 'end'>('start'); protected readonly summary = computed(() => { const start = this.startDate(); const end = this.endDate(); if (!start && !end) { return 'No range selected.'; } return `Range: ${start ? start.toLocaleDateString('en-US', { dateStyle: 'medium' }) : 'None'} - ${end ? end.toLocaleDateString('en-US', { dateStyle: 'medium' }) : 'Pending'}`; }); protected onDateSelect(day: CalendarDay): void { const selected = day.date; if (!this.startDate() || this.activeSelection() === 'start') { this.startDate.set(selected); this.endDate.set(null); this.activeSelection.set('end'); return; } const start = this.startDate()!; if (selected < start) { this.endDate.set(start); this.startDate.set(selected); } else { this.endDate.set(selected); } this.hoveredDate.set(null); this.activeSelection.set('start'); } protected onDateHover(day: CalendarDay): void { if ( !day.isDisabled && this.startDate() && !this.endDate() && this.activeSelection() === 'end' ) { this.hoveredDate.set(day.date); } } protected onDateLeave(): void { this.hoveredDate.set(null); } protected isDayInHoverRange(day: CalendarDay): boolean { const start = this.startDate(); const hovered = this.hoveredDate(); const end = this.endDate(); if (!start || !hovered || end) { return false; } const date = day.date.getTime(); const startTime = start.getTime(); const hoveredTime = hovered.getTime(); const min = Math.min(startTime, hoveredTime); const max = Math.max(startTime, hoveredTime); return date > min && date < max; } protected shiftMonth(delta: number): void { const next = new Date(this.currentMonth()); next.setMonth(next.getMonth() + delta); this.currentMonth.set(next); } protected reset(): void { this.currentMonth.set(new Date(2026, 6, 1)); this.startDate.set(new Date(2026, 6, 10)); this.endDate.set(new Date(2026, 6, 14)); this.hoveredDate.set(null); this.activeSelection.set('start'); } } ``` ## Booking panel composition ```ts import { Component, computed, signal } from '@angular/core'; import { ButtonComponent, CalendarComponent, CalendarDay, MessageBarComponent, TagComponent, } from 'ui'; @Component({ selector: 'app-calendar-booking-panel-demo', standalone: true, imports: [ButtonComponent, CalendarComponent, MessageBarComponent, TagComponent], template: `
Book a review window
A realistic calendar usually sits inside a booking or scheduling flow, not by itself.
Review slots are available only on weekdays between May 12 and May 26.
Selection
{{ summary() }}
Confirm slot Reset
`, }) export class CalendarBookingPanelDemoComponent { protected readonly minDate = '2026-05-12'; protected readonly maxDate = '2026-05-26'; protected readonly currentMonth = signal(new Date(2026, 4, 1)); protected readonly selectedDate = signal(new Date(2026, 4, 19)); protected readonly summary = computed(() => this.selectedDate() ? this.selectedDate()!.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', }) : 'Choose a review slot.', ); protected onDateSelect(day: CalendarDay): void { this.selectedDate.set(day.date); } protected shiftMonth(delta: number): void { const next = new Date(this.currentMonth()); next.setMonth(next.getMonth() + delta); this.currentMonth.set(next); } protected reset(): void { this.currentMonth.set(new Date(2026, 4, 1)); this.selectedDate.set(new Date(2026, 4, 19)); } } ``` ## Accessibility ### Current semantics `ui-calendar` exposes interactive day, month, and year cells as buttons, but it does not currently provide a full ARIA grid pattern. | Element | Current behavior | | --- | --- | | previous and next controls | native button semantics | | month, day, and year cells | button semantics through `ui-button` | | disabled dates | native disabled button state | ### Keyboard The component currently relies on standard button focus order rather than a roving-focus calendar grid. | Key | Action | | --- | --- | | `Tab` / `Shift+Tab` | moves across the header controls and visible cells | | `Enter` / `Space` | activates the focused day, month, or year button | | browser focus order | determines movement through the visible buttons | ### Labels and announcements Because the surface is button-based, the surrounding heading or panel label should explain what the calendar is for, such as booking, scheduling, or range selection. If you need stronger screen-reader guidance, add nearby text that announces the current selection and allowed date window.