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.
Estilos
Mixins y estilos
Override any of the `--hub-calendar-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-calendar-theme
July 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
28
29
30
1
2
3
4
5
6
7
8
9
10
Team Sync
11
12
Release
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
| Mixin | Parámetros | Descripción |
|---|---|---|
| Theming | ||
hub-calendar-theme() | $accent--hub-calendar-accent$accent-subtle--hub-calendar-accent-subtle$bg--hub-calendar-bg$color--hub-calendar-color$border-color--hub-calendar-border-color$border-radius--hub-calendar-border-radius$header-bg--hub-calendar-header-bg$header-padding-x--hub-calendar-header-padding-x$header-padding-y--hub-calendar-header-padding-y$btn-bg--hub-calendar-btn-bg$btn-color--hub-calendar-btn-color$btn-border-color--hub-calendar-btn-border-color$btn-hover-bg--hub-calendar-btn-hover-bg$btn-active-bg--hub-calendar-btn-active-bg$btn-active-color--hub-calendar-btn-active-color$day-min-height--hub-calendar-day-min-height$day-hover-bg--hub-calendar-day-hover-bg$day-today-bg--hub-calendar-day-today-bg$day-selected-bg--hub-calendar-day-selected-bg$day-other-month-bg--hub-calendar-day-other-month-bg$day-other-month-color--hub-calendar-day-other-month-color$day-weekend-bg--hub-calendar-day-weekend-bg$event-bg--hub-calendar-event-bg$event-color--hub-calendar-event-color$event-border-radius--hub-calendar-event-border-radius$event-font-size--hub-calendar-event-font-size | One-call theming for `<hub-calendar>` |
Variables CSS
Personaliza cada detalle con 42 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
Calendar
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Por defecto | Tipo | Descripción |
|---|---|---|---|
--hub-calendar-bg | var(--hub-sys-surface-page, #ffffff) | color | Calendar container background |
--hub-calendar-color | var(--hub-sys-text-primary, #212529) | color | Calendar base text color |
--hub-calendar-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives today/selected day, active view button, events |
--hub-calendar-accent-subtle | color-mix(in oklch, var(--hub-calendar-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | Selected-day tint (generated from the accent) |
--hub-calendar-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Calendar border color |
--hub-calendar-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Calendar border radius |
--hub-calendar-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Calendar typography family |
--hub-calendar-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Header background |
--hub-calendar-btn-bg | var(--hub-ref-color-white, #ffffff) | color | Calendar button background |
--hub-calendar-btn-color | inherit | color | Calendar button text color |
--hub-calendar-btn-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Calendar button border color |
--hub-calendar-btn-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Calendar button border radius |
--hub-calendar-btn-padding-x | var(--hub-ref-space-3, 1rem) | length | Calendar button horizontal padding |
--hub-calendar-btn-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Calendar button vertical padding |
--hub-calendar-btn-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Calendar button hover background |
--hub-calendar-btn-active-bg | var(--hub-calendar-accent) | color | Active button background |
--hub-calendar-btn-active-color | var(--hub-calendar-accent-on, var(--hub-ref-color-white, #ffffff)) | color | Active button text color |
--hub-calendar-day-min-height | 80px | length | Day cell minimum height |
--hub-calendar-day-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Day cell hover background |
--hub-calendar-day-today-bg | color-mix(in oklch, var(--hub-calendar-accent) 8%, var(--hub-calendar-bg, #fff)) | color | Today day-cell background |
--hub-calendar-day-other-month-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Other-month day-cell background |
--hub-calendar-day-other-month-color | var(--hub-sys-text-muted, #6c757d) | color | Other-month day-cell text color |
--hub-calendar-day-weekend-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Weekend day-cell background |
--hub-calendar-day-selected-bg | var(--hub-calendar-accent-subtle) | color | Selected day-cell background |
--hub-calendar-day-drag-over-bg | color-mix(in oklch, var(--hub-calendar-accent) 32%, var(--hub-calendar-bg, #fff)) | color | Drag-over day-cell background |
--hub-calendar-event-bg | var(--hub-calendar-accent) | color | Event chip background |
--hub-calendar-event-color | var(--hub-calendar-accent-on, var(--hub-ref-color-white, #ffffff)) | color | Event chip text color |
--hub-calendar-event-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Event chip border radius |
--hub-calendar-event-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Event chip horizontal padding |
--hub-calendar-event-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Event chip vertical padding |
--hub-calendar-event-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Event chip font size |
--hub-calendar-month-card-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Month card background (year view) |
--hub-calendar-month-card-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Month card hover background (year view) |
--hub-calendar-primary | var(--hub-calendar-accent) | string | Accent color alias used in month cards |
--hub-calendar-muted | var(--hub-sys-text-muted, #6c757d) | string | Muted text alias for secondary labels |
--hub-calendar-btn-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Transition for calendar actions and month cards |
--hub-calendar-day-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Day cell horizontal padding |
--hub-calendar-day-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Day cell vertical padding |
--hub-calendar-header-padding-x | var(--hub-ref-space-3, 1rem) | length | Header horizontal padding |
--hub-calendar-header-padding-y | var(--hub-ref-space-3, 1rem) | length | Header vertical padding |
--hub-calendar-month-card-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Month card horizontal padding |
--hub-calendar-month-card-padding-y | var(--hub-ref-space-4, 1.5rem) | length | Month card vertical padding |