TwitterGithub

Calendar

A date field component that allows users to enter and edit date.

Su Mo Tu We Th Fr Sa

Installation

npx nx g @spartan-ng/cli:ui calendar

Usage

import {
  HlmCalendar
} from '@spartan-ng/helm/calendar';
<hlm-calendar [(date)]="selectedDate" [min]="minDate" [max]="maxDate" />

Internationalization

The calendar supports internationalization (i18n) via the BrnCalendarI18nService . By default, weekday names and month headers are rendered in English. You can provide a custom configuration globally or swap it at runtime to support multiple locales.

Global Configuration

Use provideBrnCalendarI18n in your app bootstrap to configure labels and formats globally: 

import { bootstrapApplication } from '@angular/platform-browser';
import { provideBrnCalendarI18n } from '@spartan-ng/brain/calendar';
bootstrapApplication(App, {
	providers: [
		provideBrnCalendarI18n({
			formatWeekdayName: (i) => ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][i],
			formatHeader: (m, y) =>
				new Date(y, m).toLocaleDateString('de-DE', {
					month: 'long',
					year: 'numeric',
				}),
			labelPrevious: () => 'Vorheriger Monat',
			labelNext: () => 'Nächster Monat',
			labelWeekday: (i) => ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][i],
			firstDayOfWeek: () => 1,
		}),
	],
});

Runtime Configuration

You can dynamically switch calendar language at runtime by injecting BrnCalendarI18nService and calling use() : 

import { injectBrnCalendarI18n } from '@spartan-ng/brain/calendar';

@Component({...})
export class CalendarPage {
  private readonly _i18n = injectBrnCalendarI18n();

  switchToFrench() {
    this._i18n.use({
      ...,
      labelNext: () => 'Mois suivant',
      labelPrevious: () => 'Mois précédent',
      ...
    });
  }
}

Brain API

BrnCalendarCellButton

Selector: button[brnCalendarCellButton]

Inputs

PropTypeDefaultDescription
date* (required) T - The date this cell represents

BrnCalendarCell

Selector: [brnCalendarCell]

BrnCalendarGrid

Selector: [brnCalendarGrid]

BrnCalendarHeader

Selector: [brnCalendarHeader]

Inputs

PropTypeDefaultDescription
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

PropTypeDefaultDescription
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 undefined The day the week starts on
defaultFocusedDate T - The default focused date.
date T - The selected value.

Outputs

PropTypeDefaultDescription
dateChanged T - The selected value.

BrnCalendarMulti

Selector: [brnCalendarMulti]

Inputs

PropTypeDefaultDescription
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 undefined The day the week starts on
defaultFocusedDate T - The default focused date.
date T[] - The selected value.

Outputs

PropTypeDefaultDescription
dateChanged T[] - The selected value.

BrnCalendarRange

Selector: [brnCalendarRange]

Inputs

PropTypeDefaultDescription
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 undefined The day the week starts on
defaultFocusedDate T - The default focused date.
startDate T - The selected start date
endDate T - The selected end date

Outputs

PropTypeDefaultDescription
startDateChanged T - The selected start date
endDateChanged T - The selected end date

Helm API

HlmCalendarMulti

Selector: hlm-calendar-multi

Inputs

PropTypeDefaultDescription
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 undefined The day the week starts on
defaultFocusedDate T - The default focused date.
date T[] - The selected value.

Outputs

PropTypeDefaultDescription
dateChanged T[] - The selected value.

HlmCalendarRange

Selector: hlm-calendar-range

Inputs

PropTypeDefaultDescription
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 undefined The day the week starts on
defaultFocusedDate T - The default focused date.
startDate T - The start date of the range.
endDate T - The end date of the range.

Outputs

PropTypeDefaultDescription
startDateChanged T - The start date of the range.
endDateChanged T - The end date of the range.

HlmCalendar

Selector: hlm-calendar

Inputs

PropTypeDefaultDescription
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 undefined The day the week starts on
defaultFocusedDate T - The default focused date.
date T - The selected value.

Outputs

PropTypeDefaultDescription
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.

Su Mo Tu We Th Fr Sa

Range Selection

Use hlm-calendar-range for range date selection. Set the range by using startDate and endDate inputs.

Su Mo Tu We Th Fr Sa
Carousel Button