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 6 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`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 dateChange)
`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`	`0`	Day the week starts on (0 = Sunday, 1 = Monday, etc.)

Outputs

React to what calendar does — 5 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
`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>`

CSS variables

No CSS variables documented yet.

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.