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.

Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Vistas de calendario

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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
Client Call10
+1 más
1
Project Deadline
2
3
4
5
6
7
8
9
10

Navegación

Current Date: Wednesday, September 30, 2026

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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:

Mini mes compacto

Team calendar

A dashboard card, 370px wide

Septiembre 2026

D
L
M
X
J
V
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

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
30
31
1
2
3
Sprint planning9
4
5
6
7
8
9
Design review16
10
11
12
13
14
Payroll cut-off
15
16
17
18
19
20
21
Release 4.218
22
23
24
25
26
27
Client workshop10
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.

Compacto con tu propia navegación

Septiembre 2026

D
L
M
X
J
V
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.

Con una sola vista no se dibuja el selector

availableViews: [MONTH] — no switcher

Septiembre 2026

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

availableViews: [MONTH, WEEK] — switcher

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
30
31
1
2
3
4
5
6
Onboarding: Marta10
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo17
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.

Las iniciales de los días las pone el idioma

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.

Gestión de eventos

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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 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.

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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

Eventos drag & drop

Drag events to move them to different days.

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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!

Plantillas personalizadas

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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

Formatos de fecha y hora

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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
Client Call13:40
+1 más
1
2
3
4
5
6
7
8
9
10

Configuración del calendario

Septiembre 2026

Sem
Lun
Mar
Mié
Jue
Vie
Sáb
Dom
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
Lunch Break12
1
2
3
4
41
5
6
7
8
9
10
11

Tematización con variables CSS

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

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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
1
Client Call
2
Roadmap Planning
3
4
5
6
7
8
9
10

Acento semántico (variant)

Septiembre 2026

Dom
Lun
Mar
Mié
Jue
Vie
Sáb
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.

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