Angular Calendar Component | ng-hub-ui-calendar
Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.
Overview
Why teams search for this library
This Angular calendar component is designed for scheduling interfaces that need customizable views, event rendering, drag and drop and production-ready theming.
Install
npm install ng-hub-ui-calendarJump to
Ideal for
- booking tools
- team calendars
- resource scheduling
- event management
About calendar
ng-hub-ui-calendar helps Angular teams build booking tools, team agendas and planning screens with a reusable calendar surface. It supports the kind of event rendering and interaction patterns expected in real scheduling products.
Feature guides
Views
Multiple calendar view modes
Examples:
Month View
Traditional month grid with weeks and days
Live preview is not available for this example yet.
Code
Week View
Weekly view with time slots
Live preview is not available for this example yet.
Code
Day View
Single day view with hourly slots
Live preview is not available for this example yet.
Code
Year View
Year overview with monthly navigation
Live preview is not available for this example yet.
Code
Navigation
Calendar navigation controls
Examples:
Previous/Next
Navigate between periods
Live preview is not available for this example yet.
Code
Today Button
Jump to current date
Live preview is not available for this example yet.
Code
View Switching
Change between view modes
Live preview is not available for this example yet.
Code
Events
Event display and interaction
Examples:
Event Display
Show events on calendar days
Live preview is not available for this example yet.
Code
Event Click
Handle event click interactions
Live preview is not available for this example yet.
Code
Day Click
Handle day cell click interactions
Live preview is not available for this example yet.
Code
Drag & Drop
Move events between days
Examples:
Move Events
Drag events to new dates using CDK
Live preview is not available for this example yet.
Code
Templates
Custom rendering templates
Examples:
Event Template
Customize event appearance with eventTpt
Live preview is not available for this example yet.
Code
Day Cell Template
Customize day cells with dayCellTpt
Live preview is not available for this example yet.
Code
Key features
Multiple calendar views
Render day, week or planning-oriented layouts without building a calendar grid from scratch.
Event-driven scheduling
Useful for bookings, team planning, resource allocation and event management interfaces.
Drag and drop interaction
Move and update events directly inside the calendar when workflows need fast manipulation.
Recent changes
Version 21.1.1 - 3/19/26, 12:00 AM
changed: Co-locate SCSS with component via styleUrl; no manual @use import needed.
changed: Removed hardcoded design system token defaults from stylesheet.
fixed: Fixed grid overflow: added min-width: 0 to tracks, day cells, and event containers.
Version 21.1.0 - 3/10/26, 12:00 AM
added: Multiple calendar views: month, week, day, year.
added: Native drag-and-drop event support.