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 6 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`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 dateChange)
`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`	`0`	Día en que empieza la semana (0 = domingo, 1 = lunes, etc.)

Outputs

Reacciona a lo que hace calendar: 5 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
`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>`