Angular Calendar Component | ng-hub-ui-calendar
Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.
Styles
Mixins and styles
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
September 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Team Sync8:54 PM
1
2
Release
3
4
5
6
7
8
9
10
| Mixin | Parameters | Description |
|---|---|---|
| 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>` |
CSS variables
Theme every pixel with 61 CSS variables. Override them at :root or scope them to a wrapper.
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 | Default | Type | Description |
|---|---|---|---|
--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-height | 100% | length | Height of the calendar, and so whether it scrolls or grows — written by the height input, which is the route that cannot break the internal layout the way a consumer stylesheet on hub-calendar can |
--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) | 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) | 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-xs, 0.75rem) | length | Event chip font size |
--hub-calendar-event-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between the dot, the hour and the title inside a timed event chip |
--hub-calendar-event-time-font-size | 0.9em | length | Size of the hour printed at the end of a month-view timed chip, relative to the chip so it re-scales with it |
--hub-calendar-event-padding-x-timed | var(--hub-ref-space-1, 0.25rem) | length | Horizontal padding of a timed event chip, which carries no filled background to pad against |
--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-day-muted | color-mix(in srgb, currentColor 78%, transparent) | color | Quiet ink for a label inside a day cell — the hour on a timed chip, the "+N more" line. Taken from the cell's own ink because the calendar tints that surface by state, so no opaque colour can be right on every one of them |
--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-1, 0.25rem) | length | Day cell horizontal padding |
--hub-calendar-day-padding-y | var(--hub-ref-space-1, 0.25rem) | 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-header-gap | var(--hub-ref-space-3, 1rem) | length | Minimum distance between the header title and the button group on either side of it |
--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 |
--hub-calendar-week-number-width | 3rem | length | Width of the week-number column shown by config.showWeekNumbers (month view) |
--hub-calendar-time-column-width | 60px | length | Width of the hour ruler in the week and day views — also the width of the all-day strip's label margin, so the two stay on the same track |
--hub-calendar-all-day-min-height | 2.5rem | length | Minimum height of the all-day strip above the week and day hour grids, kept whether or not the period holds an all-day event |
--hub-calendar-hour-height | 60px | length | Height of one hour row in the week and day grids — also the unit every timed event is placed in, so re-scaling it moves the events with the ruler |
--hub-calendar-event-min-height | 1.5rem | length | Floor on the height of a timed event band, so an event shorter than the grid can draw stays legible without its top edge lying about the start time |
--hub-calendar-event-gutter | 2px | length | Horizontal gap between timed events sharing a column because they overlap in time |
--hub-calendar-compact-row-min-height | 2rem | length | Height floor of a week row in compact. Six of these, plus a caption row and the weekday initials, is the ~250px a dashboard card gives a calendar — the ordinary floors cost 600px before a date was drawn |
--hub-calendar-compact-padding | var(--hub-ref-space-1, 0.25rem) | length | Padding of the compact caption row and its weekday headers |
--hub-calendar-compact-title-font-size | var(--hub-ref-font-size-base, 1rem) | length | Size of the month caption in compact — the one part of the toolbar compact keeps, because a month grid cannot be read without it |
--hub-calendar-compact-day-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Size of the day number in a compact cell |
--hub-calendar-compact-weekday-font-size | var(--hub-ref-font-size-xs, 0.75rem) | length | Size of the compact weekday initials, which come from Intl and not from slicing a translated name |
--hub-calendar-day-marker-size | 0.3125rem | length | Diameter of the dot a compact cell draws when its day holds events |
--hub-calendar-day-marker-color | var(--hub-calendar-accent) | color | Colour of that dot, so a variant marks the month in the colour its chips would have been |