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.

Übersicht

Warum Teams nach dieser Bibliothek suchen

Diese Angular Calendar-Komponente ist für Scheduling-Oberflächen konzipiert, die anpassbare Ansichten, Ereignis-Rendering, Drag-and-drop und produktionsreifes Theming benötigen.

Installieren

npm install ng-hub-ui-calendar

Springen zu

Ideal für

  • Buchungstools
  • Teamkalender
  • Ressourcenplanung
  • Eventmanagement

Über calendar

ng-hub-ui-calendar hilft Angular-Teams, Buchungstools, Teamkalender und Planungsbildschirme mit einer wiederverwendbaren Kalenderfläche zu erstellen. Es unterstützt die Art von Ereignis-Rendering und Interaktionsmustern, die in echten Scheduling-Produkten erwartet werden.

Funktionsleitfäden

Ansichten & Navigation

Wechselt zwischen Monats-, Wochen-, Tages- und Jahresansicht und navigiert über Zeiträume hinweg

Beispiele:
Kalenderansichten

Kalenderansichten

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Team Meeting
Lunch Break
27
Project Deadline
28
29
30
1
2
3
4
5
6
7
8
9
10
11
Navigation

Navigation

Current Date: Friday, June 26, 2026

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Today's Event
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Navigation Log:

Events

Zeigt Ereignisse an und behandelt Ereignis- und Tagesinteraktionen

Beispiele:
Event-Handling

Event-Handling

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Important Meeting
Casual Lunch
27
Project Review
28
29
30
1
2
3
4
5
6
7
8
9
10
11
Overflow des Event-Inhalts

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.

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
LONG_EVENT_IDENTIFIER_WITHOUT_BREAKS_2026_RELEASE_READINESS_CHECKLIST_PHASE_ALPHA_001
28
29
Cross-team review with architecture, platform, QA, operations, and compliance stakeholders
30
1
Customer workshop: scope alignment, backlog refinement, and technical constraints review
2
3
4
5
6
7
8
9
10
11
Drag-&-Drop-Events

Drag-&-Drop-Events

Drag events to move them to different days.

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Movable Meeting
27
Reschedule This
28
Flexible Task
29
30
1
2
3
4
5
6
7
8
9
10
11

Drop Log:

No drops yet. Try dragging an event!

Templates

Passt das Rendern von Ereignissen und Tageszellen mit Templates an

Beispiele:
Benutzerdefinierte Templates

Benutzerdefinierte Templates

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
262 events
271 events
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Konfiguration

Passt das Verhalten des Kalenders über Konfigurationsoptionen an

Beispiele:
Kalenderkonfiguration

Kalenderkonfiguration

June 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
Morning Standup
Lunch Break
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12

Styling & i18n

Gestaltet das Theme über CSS-Variablen und lokalisiert den Kalender

Beispiele:
Theming mit CSS-Variablen

Theming mit CSS-Variablen

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

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Design Review
27
Client Call
28
Roadmap Planning
29
30
1
2
3
4
5
6
7
8
9
10
11
Internationalisierung (i18n)

Internationalisierung (i18n)

June 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
International Meeting
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12

i18n Support:

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

Configure translations via provideHubTranslation() with the CALENDAR_I18N dictionary.

Hauptfunktionen

Letzte Änderungen

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.

Verwandte Bibliotheken

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