Angular Calendar-Komponente | ng-hub-ui-calendar

Angular Calendar-Komponente mit Ereignisansichten, Drag-and-drop, Templates, Internationalisierung und CSS-Variablen für Scheduling-Oberflächen.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Kalenderansichten

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 Meeting09 Uhr
Client Call10 Uhr
+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:

Kompakter Mini-Monat

Team calendar

A dashboard card, 370px wide

September 2026

S
M
D
M
D
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 planning09 Uhr
4
5
6
7
8
9
Design review16 Uhr
10
11
12
13
14
Payroll cut-off
15
16
17
18
19
20
21
Release 4.218 Uhr
22
23
24
25
26
27
Client workshop10 Uhr
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.

Kompakt mit eigener Navigation

September 2026

S
M
D
M
D
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.

Bei nur einer Ansicht erscheint kein Umschalter

availableViews: [MONTH] — no switcher

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
Onboarding: Marta10 Uhr
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo17 Uhr
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 Uhr
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo17 Uhr
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.

Die Tagesinitialen kommen aus der Sprache

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 Meeting20:59
1
Casual Lunch0:59
Project Review20:59
2
3
4
5
6
7
8
9
10

Overflow des Event-Inhalts

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 Meeting20:59
1
Reschedule This
2
Flexible Task20:59
3
4
5
6
7
8
9
10

Drop Log:

No drops yet. Try dragging an event!

Benutzerdefinierte 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

Datums- und Zeitformate

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 Sync09 Uhr
Client Call13:40
+1 more
1
2
3
4
5
6
7
8
9
10

Kalenderkonfiguration

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 Standup09 Uhr
Lunch Break12 Uhr
1
2
3
4
41
5
6
7
8
9
10
11

Theming mit CSS-Variablen

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 Uhr
1
Client Call
2
Roadmap Planning
3
4
5
6
7
8
9
10

Semantischer Akzent (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 Review20:59
1
2
Release Window20:59
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.

Internationalisierung (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.