Calendar

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

Default

The standard calendar component.

Mo Di Mi Do Fr Sa So

Multiple Selection

Select multiple dates. Use minSelection and maxSelection to limit selection.

Mo Di Mi Do Fr Sa So

Range Selection

Select a range of dates using startDate and endDate.

Mo Di Mi Do Fr Sa So

Month and Year Selector

Customize the header with dropdowns for quick month and year navigation.

Mo Di Mi Do Fr Sa So

Installation & Usage

Installation

Imports

Basic Skeleton

Internationalization

The calendar supports i18n via BrnCalendarI18nService.

Global Configuration

Use provideBrnCalendarI18n in your app bootstrap:

Runtime Configuration

Dynamically switch language using the use() method:

API Reference

Brain API

Core functionality and state management for the calendar.

DirectiveSelectorInputs / Outputs
BrnCalendar[brnCalendar]
  • date: Date
  • min: Date
  • max: Date
  • captionLayout: 'dropdown' | 'label' | ...

Helm API

Styling and UI components for the calendar.

ComponentSelectorDescription
HlmCalendarhlm-calendarThe default styled calendar component.
HlmCalendarMultihlm-calendar-multiCalendar for multiple date selection.
HlmCalendarRangehlm-calendar-rangeCalendar for date range selection.