Calendar

Calendar renders an inline month view for dashboards, scheduling surfaces, date-focused widgets, and event summaries. Use ngs-calendar when the calendar itself is the interface, not just an overlay attached to a form input.

Key Features:

Month navigation: Move between months and keep the active month synchronized with the selected date.
Date selection: Bind selected and listen to selectedChange for interactive dashboards and filters.
Event markers: Pass lightweight event records to render colored markers or compact event titles on each day.
Calendar constraints: Use minDate, maxDate, firstDayOfWeek, and locale to match regional and workflow requirements.

Use Calendar for dashboard widgets, editorial schedules, availability previews, account timelines, and compact operational planning views. Use Datepicker instead when a form field needs an input-triggered date picker overlay.

Calendar Inputs

Prop	Type	Default
startAt The date whose month should be shown initially.	Date \| string \| number \| null	null
selected The selected date. The calendar normalizes values to the local start of day.	Date \| string \| number \| null	null
minDate The earliest selectable date.	Date \| string \| number \| null	null
maxDate The latest selectable date.	Date \| string \| number \| null	null
events Event records rendered as day markers or compact event titles.	readonly CalendarEvent[]	[]
locale Optional locale passed to Intl.DateTimeFormat for month, weekday, and aria labels.	string \| undefined	undefined
firstDayOfWeek The first day of the week, where 0 is Sunday and 1 is Monday.	number	0
showAdjacentDays Whether to show leading and trailing days from neighboring months.	boolean	true
showTodayButton Whether to show the Today button in the calendar header.	boolean	true
showEventTitles Whether to show up to two event titles inside each day cell.	boolean	false

Calendar Outputs

Output	Type	Default
selectedChange Emits the selected Date when the user picks a selectable day.	Date	-
monthChange Emits the first day of the newly active month after calendar navigation.	Date	-
eventSelected Emits the clicked CalendarEvent when event titles are visible.	CalendarEvent	-

Calendar Types

Type	Definition	Default
CalendarDateInput Accepted date input values for selected, startAt, minDate, maxDate, and event dates.	Date \| string \| number	-
CalendarEvent A lightweight event shown on a calendar day.	{ id?: string \| number; date: CalendarDateInput; title?: string; color?: CalendarEventColor }	-
CalendarEventColor Named marker colors supported by the calendar.	'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral' \| 'green' \| 'rose' \| 'blue'	-

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Calendar

Calendar Inputs

Calendar Outputs

Calendar Types

Source code, templates, and commercial support

Build the surrounding workflow