Referencia API

Aquí tienes el contrato completo de calendar: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta calendar a tu gusto con 17 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`variant`	`string`	`undefined`	Acento semántico del día de hoy y del seleccionado, del botón de vista activo y de las etiquetas de evento: primary, secondary, success, danger, warning, info, neutral, light, dark, o cualquier nombre propio leído como --hub-sys-color-<variant>.
`events`	`CalendarEvent<T>[]`	`[]`	Array de eventos a mostrar en el calendario
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	Tipo de vista actual (binding bidireccional con viewChange)
`selectedDate`	`Date`	`new Date()`	Fecha actualmente enfocada (binding bidireccional con selectedDateChange)
`config`	`CalendarConfig`	`{}`	Opciones de configuración para el calendario
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	Clase(s) CSS a aplicar a los eventos, puede ser estática o dinámica
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`undefined`	Día en que empieza la semana (0 = domingo, 1 = lunes, etc.). Manda sobre config.weekStartsOn cuando se pasa; si se deja sin valor decide la configuración, cuyo valor por defecto es 0.
`locale`	`string`	`'en'`	Código de idioma del diccionario integrado. Inglés y español vienen con la biblioteca; cualquier otro código recurre al inglés.
`height`	`number \| string`	`undefined`	Alto del calendario, que además decide si se desplaza o crece. Un número se lee como píxeles; vale cualquier longitud CSS, y `auto` crece con el contenido en vez de desplazarse. Sin valor, el calendario ocupa su contenedor. Es preferible a una regla de estilos: un selector `hub-calendar { … }` con ámbito gana a la disposición del propio componente y puede romperla.
`displayFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Cómo escribe el título de la cabecera el mes y el año. Admite opciones de Intl, un patrón de fecha de Angular como `MMMM yyyy` o una función. Sin valor se usa la composición interna; la vista de año, cuyo título nombra un año, se queda como está.
`timeDisplayFormat`	`Intl.DateTimeFormatOptions`	`{ hour: 'numeric', minute: '2-digit' }`	Opciones de Intl para la hora de los tooltips del chip y del día, compuestas con `hourFormat`. Por defecto, la hora y sus minutos.
`eventTimeFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	La hora que imprime un chip de la vista de mes delante de un evento con hora. Sin valor conserva la abreviatura que se le dio a una celda estrecha: los minutos se omiten cuando son cero.
`slotLabelFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	Las etiquetas de la regla de horas de las vistas de semana y día. Sin valor se quedan en el `9:00` de siempre; basta con indicar `hourFormat` para convertirlas en un reloj de verdad.
`hourFormat`	`'12' \| '24'`	`undefined`	Fuerza un reloj de 12 o de 24 horas en todo lo que el calendario escriba. Sin valor decide el idioma, que es lo mismo que significa la opción en `hub-datepicker`.
`weekdayFormat`	`'short' \| 'narrow' \| 'long'`	`'short' ('narrow' when compact)`	Ancho de las cabeceras de los días de la semana. `short` y `long` leen el diccionario del propio calendario, así que un diccionario de la aplicación llega hasta ellas; `narrow` no tiene entrada allí y se deriva del idioma.
`monthFormat`	`'short' \| 'long'`	`'long'`	Cómo se escribe el mes en el título de la cabecera y en las tarjetas de la vista de año. `long` por defecto, que es lo que el calendario ha impreso siempre.
`compact`	`boolean`	`false`	Dibuja el calendario como un mes en miniatura: se va la barra, se van las alturas mínimas de día y semana, las cabeceras pasan a las iniciales que dicte el idioma y el día con eventos lleva un punto en vez de etiquetas. El rótulo del mes se queda. Se transforma con `booleanAttribute`, así que el atributo `compact` a secas lo enciende.

Outputs

Reacciona a lo que hace calendar: 6 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`eventClick`	`CalendarEvent<T>`	Se emite cuando se hace clic en un evento
`dayClick`	`CalendarDay<T>`	Se emite cuando se hace clic en una celda de día
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	Se emite cuando se suelta un evento en un día diferente
`viewChange`	`CalendarViewType`	Se emite cuando cambia el tipo de vista
`selectedDateChange`	`Date`	Se emite cuando cambia la fecha seleccionada; admite enlace bidireccional mediante [(selectedDate)]
`dateChange`	`Date`	Se emite cuando la navegación cambia la fecha mostrada

Templates

Hazlo tuyo — 2 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`eventTpt`	Plantilla para renderizar eventos individuales. Contexto: { event: CalendarEvent }	`<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>`
`dayCellTpt`	Plantilla para personalizar el renderizado de las celdas de día. Contexto: { day: CalendarDay }	`<ng-template dayCellTpt let-day="day">{{ day.date \| date }}</ng-template>`