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-calendar

Jump 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 & Navigation

Switch between month, week, day and year views and move across periods

Examples:
Calendar Views

Calendar Views

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
Team Meeting
Lunch Break
11
Project Deadline
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Navigation

Navigation

Current Date: Friday, July 10, 2026

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
Today's Event
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Navigation Log:

Events

Display events and handle event and day interactions

Examples:
Event Handling

Event Handling

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
Important Meeting
Casual Lunch
11
Project Review
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Event Content Overflow

Event Content Overflow

This example uses very long event titles and descriptions to verify that overflowing content does not resize calendar columns or break the month grid layout.

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
11
LONG_EVENT_IDENTIFIER_WITHOUT_BREAKS_2026_RELEASE_READINESS_CHECKLIST_PHASE_ALPHA_001
12
13
Cross-team review with architecture, platform, QA, operations, and compliance stakeholders
14
15
Customer workshop: scope alignment, backlog refinement, and technical constraints review
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Drag & Drop Events

Drag & Drop Events

Drag events to move them to different days.

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
Movable Meeting
11
Reschedule This
12
Flexible Task
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Drop Log:

No drops yet. Try dragging an event!

Templates

Customize event and day-cell rendering with templates

Examples:
Custom Templates

Custom Templates

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
102 events
111 events
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Configuration

Tune calendar behavior through configuration options

Examples:
Calendar Configuration

Calendar Configuration

July 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
1
2
3
4
5
6
7
8
9
10
Morning Standup
Lunch Break
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

Styling & i18n

Theme via CSS variables and localize the calendar

Examples:
CSS Variables Theming

CSS Variables Theming

This example customizes the calendar using --hub-calendar-* CSS variables.

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
Design Review
11
Client Call
12
Roadmap Planning
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
Internationalization (i18n)

Internationalization (i18n)

July 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
1
2
3
4
5
6
7
8
9
10
International Meeting
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9

i18n Support:

The calendar uses ng-hub-ui-utils TranslatePipe for labels.

Configure translations via provideHubTranslation() with the CALENDAR_I18N dictionary.

Key features

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.

Related libraries

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-paginable