API reference

Here's the full contract for calendar: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial calendar in with 17 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`variant`	`string`	`undefined`	Semantic accent for the today / selected day, the active view button and the event chips: primary, secondary, success, danger, warning, info, neutral, light, dark, or any custom name read as --hub-sys-color-<variant>.
`events`	`CalendarEvent<T>[]`	`[]`	Array of events to display on the calendar
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	Current view type (two-way binding with viewChange)
`selectedDate`	`Date`	`new Date()`	Currently focused date (two-way binding with selectedDateChange)
`config`	`CalendarConfig`	`{}`	Configuration options for the calendar
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	CSS class(es) to apply to events, can be static or dynamic
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`undefined`	Day the week starts on (0 = Sunday, 1 = Monday, etc.). Overrides config.weekStartsOn when set; left unset, the config decides and its own default is 0.
`locale`	`string`	`'en'`	Language code for the built-in dictionary. English and Spanish ship with the library; any other code falls back to English.
`height`	`number \| string`	`undefined`	Height of the calendar, which also decides whether it scrolls or grows. A number is read as pixels; any CSS length works, and `auto` grows to the content instead of scrolling. Left unset the calendar fills its container. Prefer this over a stylesheet rule: a scoped `hub-calendar { … }` selector outranks the component's own layout and can unstack it.
`displayFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	How the header title writes the month and year. Takes Intl options, an Angular date pattern such as `MMMM yyyy`, or a function. Unset, the built-in composition is used; the year view, whose title names a year, is left alone.
`timeDisplayFormat`	`Intl.DateTimeFormatOptions`	`{ hour: 'numeric', minute: '2-digit' }`	Intl options for the clock in the chip and day tooltips, composed with `hourFormat`. Defaults to the hour and its minutes.
`eventTimeFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	The hour a month-view chip prints in front of a timed event. Unset, it keeps the abbreviation the narrow cell was given: the minutes are dropped when they are zero.
`slotLabelFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	The labels down the hour ruler of the week and day views. Unset, they stay the plain `9:00` the ruler has always printed; setting `hourFormat` alone turns them into a real clock.
`hourFormat`	`'12' \| '24'`	`undefined`	Forces a 12- or 24-hour clock everywhere the calendar writes one. Unset, the locale decides — the same meaning the option has in `hub-datepicker`.
`weekdayFormat`	`'short' \| 'narrow' \| 'long'`	`'short' ('narrow' when compact)`	Width of the weekday column headers. `short` and `long` read the calendar's own dictionary, so an application dictionary reaches them; `narrow` has no entry there and is derived from the locale.
`monthFormat`	`'short' \| 'long'`	`'long'`	How the month is written in the header title and on the year view's cards. `long` by default, which is what the calendar has always printed.
`compact`	`boolean`	`false`	Draws the calendar as a mini-month: the toolbar goes, the day and week height floors go, the weekday headers narrow to the locale's own initials and a day that holds events carries a dot instead of chips. The month caption stays. `booleanAttribute`-transformed, so the bare `compact` attribute switches it on.

Outputs

React to what calendar does — 6 events to hook your logic onto.

Name	Type	Description
`eventClick`	`CalendarEvent<T>`	Emitted when an event is clicked
`dayClick`	`CalendarDay<T>`	Emitted when a day cell is clicked
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	Emitted when an event is dropped on a different day
`viewChange`	`CalendarViewType`	Emitted when the view type changes
`selectedDateChange`	`Date`	Emitted when the selected date changes; supports two-way binding via [(selectedDate)]
`dateChange`	`Date`	Emitted when navigation changes the displayed date

Templates

Make it yours — 2 template slots let you project custom markup.

Name	Description	Example
`eventTpt`	Template for rendering individual events. Context: { event: CalendarEvent }	`<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>`
`dayCellTpt`	Template for customizing day cell rendering. Context: { day: CalendarDay }	`<ng-template dayCellTpt let-day="day">{{ day.date \| date }}</ng-template>`