Componente Calendar para Angular | ng-hub-ui-calendar

Componente calendario para Angular con vistas de eventos, drag and drop, plantillas, internacionalización y variables CSS para interfaces de scheduling.

Visión General

Por qué los equipos buscan esta librería

Este componente calendario para Angular está diseñado para interfaces de scheduling que necesitan vistas configurables, renderizado de eventos, drag and drop y theming listo para producción.

Instalación

npm install ng-hub-ui-calendar

Ir a

Ideal para

  • herramientas de reservas
  • calendarios de equipo
  • planificación de recursos
  • gestión de eventos

Sobre calendar

ng-hub-ui-calendar ayuda a los equipos Angular a construir herramientas de reservas, agendas de equipo y pantallas de planificación con una superficie de calendario reutilizable. Soporta el tipo de renderizado e interacción con eventos que se espera en productos reales de scheduling.

Guías de uso

Vistas y navegación

Cambia entre las vistas de mes, semana, día y año y desplázate entre periodos

Ejemplos:
Vistas de calendario

Vistas de calendario

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
Navegación

Navegación

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:

Eventos

Muestra eventos y gestiona las interacciones con eventos y días

Ejemplos:
Gestión de eventos

Gestión de eventos

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
Overflow del contenido de eventos

Overflow del contenido de eventos

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
Eventos drag & drop

Eventos drag & drop

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!

Plantillas

Personaliza el renderizado de eventos y celdas de día con plantillas

Ejemplos:
Plantillas personalizadas

Plantillas personalizadas

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

Configuración

Ajusta el comportamiento del calendario mediante opciones de configuración

Ejemplos:
Configuración del calendario

Configuración del calendario

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

Estilos e i18n

Aplica temas mediante variables CSS y localiza el calendario

Ejemplos:
Tematización con variables CSS

Tematización con variables CSS

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
Internacionalización (i18n)

Internacionalización (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.

Características clave

Cambios recientes

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.

Librerías relacionadas

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