Calendar
A date field component that allows users to enter and edit date.
April 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
@Component({
selector: 'spartan-calendar-preview',
standalone: true,
imports: [HlmCalendarComponent],
template: '<hlm-calendar [(date)]="selectedDate" [min]="minDate" [max]="maxDate" />',
})
export class CalendarPreviewComponent {
/** The selected date */
selectedDate = new Date();
/** The minimum date */
minDate = new Date(2023, 0, 1);
/** The maximum date */
maxDate = new Date(2030, 11, 31);
}Installation
npx nx g @spartan-ng/cli:ui calendar
ng g @spartan-ng/cli:ui calendar
Usage
import {
HlmCalendarComponent,
} from '@spartan-ng/ui-calendar-helm';<hlm-calendar
[(date)]="selectedDate"
[min]="minDate"
[max]="maxDate"
[disabled]="false"
[dateDisabled]="(date) => false"
[weekStartsOn]="0"
/>Examples
Multiple Selection
Use hlm-calendar-multi for multiple date selection. Limit the selectable dates using minSelection and maxSelection inputs.
April 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
import { Component } from '@angular/core';
import { HlmCalendarMultiComponent } from '@spartan-ng/ui-calendar-helm';
@Component({
selector: 'spartan-calendar-multiple',
imports: [HlmCalendarMultiComponent],
template: `
<hlm-calendar-multi
[(date)]="selectedDates"
[min]="minDate"
[max]="maxDate"
[minSelection]="2"
[maxSelection]="6"
/>
`,
host: {
class: 'preview flex min-h-[350px] w-full justify-center p-10 items-center',
},
})
export class CalendarMultipleExampleComponent {
/** 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);
}