Calendar
A date field component that allows users to enter and edit date.
August 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
import { Component } from '@angular/core';
import { HlmCalendar } from '@spartan-ng/helm/calendar';
@Component({
selector: 'spartan-calendar-preview',
imports: [HlmCalendar],
template: `
<hlm-calendar [(date)]="selectedDate" [min]="minDate" [max]="maxDate" />
`,
})
export class CalendarPreview {
/** The selected date */
public selectedDate = new Date();
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
}Installation
npx nx g @spartan-ng/cli:ui calendar
ng g @spartan-ng/cli:ui calendar
Usage
import {
HlmCalendar
} from '@spartan-ng/helm/calendar';<hlm-calendar [(date)]="selectedDate" [min]="minDate" [max]="maxDate" />Brain API
BrnCalendarCellButton
Selector: button[brnCalendarCellButton]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| date* (required) | T | - | The date this cell represents |
BrnCalendarCell
Selector: [brnCalendarCell]
BrnCalendarGrid
Selector: [brnCalendarGrid]
BrnCalendarHeader
Selector: [brnCalendarHeader]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| id | unknown | `brn-calendar-header-${uniqueId++}` | The unique id for the header |
BrnCalendarNextButton
Selector: [brnCalendarNextButton]
BrnCalendarPreviousButton
Selector: [brnCalendarPreviousButton]
BrnCalendarWeek
Selector: [brnCalendarWeek]
BrnCalendarWeekday
Selector: [brnCalendarWeekday]
BrnCalendar
Selector: [brnCalendar]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| min | T | - | The minimum date that can be selected. |
| max | T | - | The maximum date that can be selected. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| dateDisabled | (date: T) => boolean | () => false | Whether a specific date is disabled. |
| weekStartsOn | Weekday | 0 | The day the week starts on |
| defaultFocusedDate | T | - | The default focused date. |
| date | T | - | The selected value. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| dateChanged | T | - | The selected value. |
BrnCalendarMulti
Selector: [brnCalendarMulti]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| min | T | - | The minimum date that can be selected. |
| max | T | - | The maximum date that can be selected. |
| minSelection | number | undefined | The minimum selectable dates. |
| maxSelection | number | undefined | The maximum selectable dates. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| dateDisabled | (date: T) => boolean | () => false | Whether a specific date is disabled. |
| weekStartsOn | Weekday | 0 | The day the week starts on |
| defaultFocusedDate | T | - | The default focused date. |
| date | T[] | - | The selected value. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| dateChanged | T[] | - | The selected value. |
Helm API
HlmCalendarMulti
Selector: hlm-calendar-multi
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| calendarClass | ClassValue | - | - |
| min | T | - | The minimum date that can be selected. |
| max | T | - | The maximum date that can be selected. |
| minSelection | number | undefined | The minimum selectable dates. |
| maxSelection | number | undefined | The maximum selectable dates. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| dateDisabled | (date: T) => boolean | () => false | Whether a specific date is disabled. |
| weekStartsOn | Weekday | 0 | The day the week starts on |
| defaultFocusedDate | T | - | The default focused date. |
| date | T[] | - | The selected value. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| dateChanged | T[] | - | The selected value. |
HlmCalendar
Selector: hlm-calendar
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| calendarClass | ClassValue | - | - |
| min | T | - | The minimum date that can be selected. |
| max | T | - | The maximum date that can be selected. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| dateDisabled | (date: T) => boolean | () => false | Whether a specific date is disabled. |
| weekStartsOn | Weekday | 0 | The day the week starts on |
| defaultFocusedDate | T | - | The default focused date. |
| date | T | - | The selected value. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| dateChanged | T | - | The selected value. |
Examples
Multiple Selection
Use hlm-calendar-multi for multiple date selection. Limit the selectable dates using minSelection and maxSelection inputs.
August 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
import { Component } from '@angular/core';
import { HlmCalendarMulti } from '@spartan-ng/helm/calendar';
@Component({
selector: 'spartan-calendar-multiple',
imports: [HlmCalendarMulti],
template: `
<hlm-calendar-multi
[(date)]="selectedDates"
[min]="minDate"
[max]="maxDate"
[minSelection]="2"
[maxSelection]="6"
/>
`,
})
export class CalendarMultipleExample {
/** The selected date */
public selectedDates = [new Date()];
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
}