Angular Calendar Component | ng-hub-ui-calendar

Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Calendar Views

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Office Closed
Team Meeting9 AM
Client Call10 AM
+1 more
1
Project Deadline
2
3
4
5
6
7
8
9
10

Navigation

Current Date: Wednesday, September 30, 2026

September 2026

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

Navigation Log:

Compact mini-month

Team calendar

A dashboard card, 370px wide

September 2026

S
M
T
W
T
F
S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

The same events, the same [height], without compact

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
Sprint planning9 AM
4
5
6
7
8
9
Design review4 PM
10
11
12
13
14
Payroll cut-off
15
16
17
18
19
20
21
Release 4.26 PM
22
23
24
25
26
27
Client workshop10 AM
28
29
30
1
2
3
4
5
6
7
8
9
10

A height alone does not make a calendar fit, because the cells have floors of their own: a day cell asks for 80px and a week row for 100px, so six rows cost 600px before a date is drawn and the full-size calendar spends its 250px showing the first week. compact lifts both floors — same box, whole month.

Compact with your own navigation

September 2026

S
M
T
W
T
F
S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

previous(), next() and goToToday() are public, so <hub-calendar #cal compact> drives the month from chrome of your own — two chevrons here, a swipe or a pair of links elsewhere. From outside the template, [(selectedDate)] moves it just as well.

A single view draws no switcher

availableViews: [MONTH] — no switcher

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
Onboarding: Marta10 AM
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo5 PM
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

availableViews: [MONTH, WEEK] — switcher

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
Onboarding: Marta10 AM
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo5 PM
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

A switcher offering one choice is not a switcher: the button could only ever repaint its own pressed state, and it was still taking a button's worth of the header. Nothing to opt into — narrow config.availableViews to one view and the row goes, in a full-size calendar as in a compact one.

Weekday initials come from the language

September 2026

S
M
T
W
T
F
S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

S M T W T F S in English, D L M X J V S in Spanish. Compact narrows the weekday headers to the locale's own initials, which come from Intl and not from the dictionary — Spanish will not give you a usable initial by slicing a name, because martes and miércoles both start with M, and that is why its Wednesday is an X. An explicit [weekdayFormat] still wins.

Event Handling

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Important Meeting9:01 PM
1
Casual Lunch1:01 AM
Project Review9:01 PM
2
3
4
5
6
7
8
9
10

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.

September 2026

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

Drag & Drop Events

Drag events to move them to different days.

September 2026

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

Drop Log:

No drops yet. Try dragging an event!

Custom Templates

September 2026

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

Date and Time Formats

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Company Offsite
Team Sync9 AM
Client Call1:40 PM
+1 more
1
2
3
4
5
6
7
8
9
10

Calendar Configuration

September 2026

Wk
Mon
Tue
Wed
Thu
Fri
Sat
Sun
36
31
1
2
3
4
5
6
37
7
8
9
10
11
12
13
38
14
15
16
17
18
19
20
39
21
22
23
24
25
26
27
40
28
29
30
Morning Standup9 AM
Lunch Break12 PM
1
2
3
4
41
5
6
7
8
9
10
11

CSS Variables Theming

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

September 2026

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

Semantic Accent (variant)

September 2026

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

brand is not one of the nine built-ins: it renders because this example declares --hub-sys-color-brand on the wrapper. Any accent your design system defines works the same way, with no recompilation of the library.

Internationalization (i18n)

Septiembre 2026

Lun
Mar
Mié
Jue
Vie
Sáb
Dom
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
International Meeting
1
2
3
4
5
6
7
8
9
10
11

What moves with the locale

Weekday and month names, the Today shortcut and the view switcher all read from the same dictionary — chrome and data in one language, never half of each.

en and es ship with the library. Pick fr to see the documented fallback: an unbundled locale resolves to English rather than rendering blanks or raw keys.

To override the bundled strings, feed HUBUI.CALENDAR.* through provideHubTranslationAdapter(); the dictionary wins over locale, and the built-in entries remain the fallback.