Справочник API

Вот полный контракт calendar: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте calendar с помощью 17 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`variant`	`string`	`undefined`	Семантический акцент для сегодняшнего и выбранного дня, активной кнопки вида и меток событий: primary, secondary, success, danger, warning, info, neutral, light, dark или любое своё имя, читаемое как --hub-sys-color-<variant>.
`events`	`CalendarEvent<T>[]`	`[]`	Массив событий для отображения в календаре
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	Текущий тип представления (двусторонняя привязка с viewChange)
`selectedDate`	`Date`	`new Date()`	Текущая выбранная дата (двусторонняя привязка с selectedDateChange)
`config`	`CalendarConfig`	`{}`	Параметры конфигурации для календаря
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	CSS-класс(ы) для применения к событиям, может быть статическим или динамическим
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`undefined`	День начала недели (0 = воскресенье, 1 = понедельник и т. д.). При указании имеет приоритет над config.weekStartsOn; если не задан, решает конфигурация со значением по умолчанию 0.
`locale`	`string`	`'en'`	Код языка встроенного словаря. Английский и испанский поставляются с библиотекой; любой другой код откатывается к английскому.
`height`	`number \| string`	`undefined`	Высота календаря, от которой зависит и то, прокручивается он или растёт. Число читается как пиксели, подходит любая длина CSS, а `auto` растёт по содержимому вместо прокрутки. Без значения календарь занимает свой контейнер. Предпочтительнее правила в таблице стилей: селектор `hub-calendar { … }` с областью видимости побеждает собственную раскладку компонента и может её сломать.
`displayFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Как заголовок шапки пишет месяц и год. Принимает параметры Intl, шаблон даты Angular вроде `MMMM yyyy` или функцию. Без значения используется встроенная сборка; годовой вид, чей заголовок называет год, остаётся как есть.
`timeDisplayFormat`	`Intl.DateTimeFormatOptions`	`{ hour: 'numeric', minute: '2-digit' }`	Параметры Intl для времени во всплывающих подсказках фишки и дня, объединяемые с `hourFormat`. По умолчанию — час и минуты.
`eventTimeFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Время, которое фишка месячного вида печатает перед событием со временем. Без значения сохраняется сокращение, рассчитанное на узкую ячейку: минуты опускаются, когда равны нулю.
`slotLabelFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Подписи на линейке часов в недельном и дневном видах. Без значения остаются прежними — простое `9:00`; достаточно задать `hourFormat`, чтобы они стали настоящими часами.
`hourFormat`	`'12' \| '24'`	`undefined`	Принудительно задаёт 12- или 24-часовой формат везде, где календарь пишет время. Без значения решает язык — тот же смысл, что и в `hub-datepicker`.
`weekdayFormat`	`'short' \| 'narrow' \| 'long'`	`'short' ('narrow' when compact)`	Ширина заголовков столбцов дней недели. `short` и `long` читают собственный словарь календаря, поэтому словарь приложения до них доходит; у `narrow` там записи нет, и он выводится из локали.
`monthFormat`	`'short' \| 'long'`	`'long'`	Как месяц пишется в заголовке шапки и на карточках годового вида. По умолчанию `long` — то, что календарь печатал всегда.
`compact`	`boolean`	`false`	Рисует календарь как мини-месяц: панель уходит, минимальные высоты дня и недели тоже, заголовки сжимаются до букв, которые даёт локаль, а день с событиями получает точку вместо плашек. Подпись месяца остаётся. Преобразуется через `booleanAttribute`, поэтому достаточно самого атрибута `compact`.

События

Реагируйте на то, что делает calendar, — 6 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`eventClick`	`CalendarEvent<T>`	Вызывается при клике по событию
`dayClick`	`CalendarDay<T>`	Вызывается при клике по ячейке дня
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	Вызывается при перетаскивании события на другой день
`viewChange`	`CalendarViewType`	Вызывается при изменении типа представления
`selectedDateChange`	`Date`	Вызывается при изменении выбранной даты; поддерживает двустороннюю привязку через [(selectedDate)]
`dateChange`	`Date`	Вызывается, когда навигация изменяет отображаемую дату

Шаблоны

Сделайте его своим — 2 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`eventTpt`	Шаблон для отрисовки отдельных событий. Контекст: { event: CalendarEvent }	`<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>`
`dayCellTpt`	Шаблон для настройки отрисовки ячейки дня. Контекст: { day: CalendarDay }	`<ng-template dayCellTpt let-day="day">{{ day.date \| date }}</ng-template>`