Angular Calendar Component | ng-hub-ui-calendar
Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.
API reference
Inputs
events
Type: CalendarEvent<T>[]
Default: []
Array of events to display on the calendar
view
Type: 'month' | 'week' | 'day' | 'year'
Default: 'month'
Current view type (two-way binding with viewChange)
selectedDate
Type: Date
Default: new Date()
Currently focused date (two-way binding with dateChange)
config
Type: CalendarConfig
Default: {}
Configuration options for the calendar
eventClass
Type: string | ((event: CalendarEvent) => string)
Default: undefined
CSS class(es) to apply to events, can be static or dynamic
weekStartsOn
Type: 0 | 1 | 2 | 3 | 4 | 5 | 6
Default: 0
Day the week starts on (0 = Sunday, 1 = Monday, etc.)
Outputs
eventClick
Type: CalendarEvent<T>
Emitted when an event is clicked
dayClick
Type: CalendarDay<T>
Emitted when a day cell is clicked
eventDrop
Type: { event: CalendarEvent<T>; newDate: Date; previousDate: Date }
Emitted when an event is dropped on a different day
viewChange
Type: CalendarViewType
Emitted when the view type changes
dateChange
Type: Date
Emitted when navigation changes the displayed date
Templates
eventTpt
Template for rendering individual events. Context: { event: CalendarEvent }
Example:
dayCellTpt
Template for customizing day cell rendering. Context: { day: CalendarDay }
Example:
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.