Composant Calendar Angular | ng-hub-ui-calendar

Composant calendrier Angular avec vues d'événements, drag and drop, templates, internationalisation et variables CSS pour les interfaces de planification.

Vue d’ensemble

Pourquoi les équipes recherchent cette bibliothèque

Ce composant calendrier Angular est conçu pour les interfaces de planification qui ont besoin de vues configurables, de rendu d'événements, de drag and drop et d'un theming prêt pour la production.

Installation

npm install ng-hub-ui-calendar

Aller à

Idéal pour

  • outils de réservation
  • calendriers d'équipe
  • planification de ressources
  • gestion d'événements

À propos de calendar

ng-hub-ui-calendar aide les équipes Angular à construire des outils de réservation, des agendas d'équipe et des écrans de planification avec une surface de calendrier réutilisable. Il prend en charge le type de rendu et d'interaction avec les événements attendu dans de véritables produits de planification.

Guides de fonctionnalités

Vues et navigation

Basculez entre les vues mois, semaine, jour et année et naviguez entre les périodes.

Exemples:
Vues du calendrier

Vues du calendrier

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:

Événements

Affichez les événements et gérez les interactions avec les événements et les jours.

Exemples:
Gestion des événements

Gestion des événements

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
Débordement du contenu des événements

Débordement du contenu des événements

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
Événements drag & drop

Événements drag & drop

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

Personnalisez le rendu des événements et des cellules de jour avec des modèles.

Exemples:
Templates personnalisés

Templates personnalisés

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

Configuration

Ajustez le comportement du calendrier via les options de configuration.

Exemples:
Configuration du calendrier

Configuration du calendrier

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

Style et i18n

Thématisez via les variables CSS et localisez le calendrier.

Exemples:
Thématisation par variables CSS

Thématisation par variables CSS

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
Internationalisation (i18n)

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

Fonctionnalités clés

Changements récents

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.

Bibliothèques associées

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