Angular Calendar Component | ng-hub-ui-calendar
Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.
Last updated Sep 6, 2026
Overview
Why teams search for this library
This Angular calendar component is designed for scheduling interfaces that need customizable views, event rendering, drag and drop and production-ready theming.
Install
npm install ng-hub-ui-calendarJump to
Ideal for
- booking tools
- team calendars
- resource scheduling
- event management
About calendar
ng-hub-ui-calendar helps Angular teams build booking tools, team agendas and planning screens with a reusable calendar surface. It supports the kind of event rendering and interaction patterns expected in real scheduling products.
Feature guides
Events
Display events and handle event and day interactions
Examples:
Event Handling
Event Handling
September 2026
Event Content Overflow
Event Content Overflow
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.
September 2026
Drag & Drop Events
Drag & Drop Events
Drag events to move them to different days.
September 2026
Drop Log:
No drops yet. Try dragging an event!
Templates
Customize event and day-cell rendering with templates
Examples:
Custom Templates
Custom Templates
September 2026
Configuration
Tune calendar behavior through configuration options
Examples:
Calendar Configuration
Calendar Configuration
September 2026
Styling & i18n
Theme via CSS variables and localize the calendar
Examples:
CSS Variables Theming
CSS Variables Theming
This example customizes the calendar using --hub-calendar-* CSS variables.
September 2026
Semantic Accent (variant)
Semantic Accent (variant)
September 2026
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.
Internationalization (i18n)
Internationalization (i18n)
Septiembre 2026
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.
Key features
Recent changes
Version 22.6.4 - 9/6/26, 12:00 AM
fixed: locale stopped at the header. 22.6.1 moved the header buttons into the dictionary and left the rest behind: the month cell still overflowed into +2 more, a year-view card still read 3 events and announced that same count to a screen reader, and the week and day headings took their weekday and month names from DatePipe, which follows the application LOCALE_ID rather than the calendar locale. All four now resolve through the same lookup as the weekday and month names, and the two counts arrive as new dictionary keys, moreEvents and eventCount, each carrying a {count} placeholder so a locale can move the number or reword the label around it. English output is unchanged.
fixed: config.weekStartsOn decided nothing. The weekStartsOn input documented itself as an override of the config field, but it was the only value any grid ever read, so an application that centralised its settings in a shared CalendarConfig still opened every calendar on Sunday. The documented precedence now holds: the input wins when it is bound, the config answers when it is not, and Sunday stays the default of last resort. To tell an unbound input from an explicit Sunday the input type is now 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined, which only matters to code that reads the signal directly; template bindings are unaffected.
fixed: Four of the nine accents could not be re-pointed from a stylesheet. secondary, neutral, light and dark were treated as foreign variants, so the component wrote --hub-calendar-accent as an inline style on the host, which outranks any consumer rule, including the hub-calendar[data-variant] recipe the library itself documents. All nine canonical variants now resolve through the stylesheet. Rendering is unchanged; what changes is that a consumer rule finally takes effect. Custom variants keep their inline fallback, since no stylesheet rule backs them.
fixed: BREAKING_CHANGES.md sent readers to a stylesheet path that no longer exists, filed the base.scss rename under 21.0.0 although it shipped in 22.0.0, and promised breaking changes in major versions, which this library cannot deliver: its major tracks the Angular major it targets, so a break arrives in a minor and that file is the only warning a reader gets. Each break now sits under the version that shipped it, with a migration that resolves.
fixed: The README omitted selectedDateChange from its outputs table, leaving a reader who worked from the table alone no way to know that selectedDate has a two-way half. It also documented the translation dictionary as the top-level calendar.* namespace only, and the CALENDAR_I18N JSDoc said the same, while 22.6.0 made HUBUI.CALENDAR.* resolve first. Both now lead with HUBUI.CALENDAR.* and keep the legacy branch documented as the fallback.
fixed: Changelog heading order. The 21.1.1 entry sat between 22.1.0 and 22.0.0, which makes the file unreadable as a history and unreliable as the source for the documentation site that mirrors it.
fixed: The CSS variables reference called itself complete while two accent tokens were missing. --hub-calendar-accent-emphasis and --hub-calendar-accent-on are declared by the component and were announced in 22.2.0 as part of the accent family, yet the only file that catalogues the tokens listed neither, and the repo parity check cannot catch the omission because it exempts the accent slots. A reader taking the file at its word could not learn that the two roles are overridable, least of all -on, which decides whether text on the accent is readable. The table now covers all 44 declared tokens.
added: FUNCTIONALITIES.md. Nine other libraries in the monorepo ship one, and the calendar had no single place showing what the component actually supports and how much of it a running example demonstrates. The table is written against the code, so the accessibility layer and the application-dictionary path are marked as supported but unexampled rather than implied to be covered.
changed: The component now declares ChangeDetectionStrategy.OnPush. Its own JSDoc and the 22.6.0 entry both describe the calendar as running under OnPush, and every sibling library in the monorepo says so in its metadata, but this one never did. Nothing changes at runtime: Angular 22 already applies OnPush unless a component opts into Eager, and every value the template reads is a signal. What changes is that the source now states the contract instead of relying on the framework default staying where it is.
deprecated: CalendarModule is deprecated and will be removed in 23.0.0. It imports and exports HubCalendarComponent, EventTemplateDirective and DayCellTemplateDirective, all three standalone and all three already exported from the entry point, and provides nothing of its own, so importing them directly is the whole migration. The class described itself as the path for legacy NgModule applications but carried no @deprecated tag, so neither an editor nor the build warned anyone. See BREAKING_CHANGES.md.
Version 22.6.3 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library’s own documentation page rather than at the site root. It is the link a registry shows beside the package, and landing on a front page the reader then has to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only.
Version 22.6.2 - 8/17/26, 12:00 AM
fixed: The package shipped without its licence notice. package.json declared MIT, but no LICENSE file travelled in the tarball — and MIT itself requires the copyright notice to be included in distributions. The notice ships now.
Version 22.6.1 - 8/16/26, 12:00 AM
fixed: The header buttons ignored the locale. Today was written into the template by hand and the view switcher title-cased the enum, while the weekday and month names came from the dictionary — so a calendar with locale="es" rendered "Lun, Mar, Mié" underneath "Today / Month / Week / Day / Year", with nothing a consumer could pass to reconcile them. All five labels now resolve through the same lookup as the day and month names, honouring the injected translation service first and falling back to the built-in dictionary. English is unchanged.
Version 22.6.0 - 8/14/26, 12:00 AM
changed: Labels now resolve HUBUI.CALENDAR.* before the legacy calendar.* branch. The collision-safe namespace lets an application dictionary feed the calendar through provideHubTranslationAdapter() without reserving a top-level calendar key. Existing calendar.* dictionaries keep working — the legacy branch is still the fallback.
changed: Dictionary changes are now reactive. The component tracks translation-source emissions, so switching language refreshes the calendar labels instead of leaving the strings resolved at first render under OnPush.
added: README documentation for the application-wide translation adapter (provideHubTranslationAdapter() from ng-hub-ui-utils).
Version 22.5.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.5.0 - 7/28/26, 12:00 AM
added: WAI-ARIA grid semantics on the month view (grid/row/columnheader/gridcell, aria-selected, aria-current="date", localized full-date labels).
added: Keyboard navigation on the month grid: roving tabindex, arrow keys by day/week, Home/End, PageUp/PageDown across months, Enter/Space to activate a day.
added: Event chips and year-view month cards are keyboard-activatable buttons (role="button", tabindex, Enter/Space); labelled prev/next buttons and aria-pressed view switcher.
added: Starter unit test suite for the component (rendering, navigation, keyboard, ARIA).
fixed: SSR-safe drag-end cleanup: the drag-over class sweep is scoped to the host element instead of the global document.
Version 22.4.1 - 7/26/26, 12:00 AM
fixed: Declared the real ng-hub-ui-utils peer range (>=22.6.0); the previous >=1.0.0 floor resolved to a utils major without HubOverflowTooltipDirective.
Version 22.4.0 - 7/7/26, 12:00 AM
changed: Breaking (packaging): the theme mixin builds to dist/calendar/styles/... instead of dist/calendar/src/lib/styles/..., so @use ‘ng-hub-ui-calendar/styles’ resolves. Update any @use that reached into src/lib/styles.
Version 22.3.1 - 7/2/26, 12:00 AM
fixed: CSS variable fallbacks realigned to the ds light defaults (--hub-sys-color-primary, --hub-sys-state-hover-bg, --hub-sys-transition-base, --hub-ref-font-family-base). Fallbacks only apply when ng-hub-ui-ds is not loaded.
fixed: The stale old-palette fallbacks for the today and selected day backgrounds (#eff6ff, #dbeafe) now mirror the accent-derived host defaults, so they follow a custom accent even when the host declarations are unset.
fixed: The two bare day-cell / day-column hover transitions now match the ds base timing (background 0.2s ease-in-out).
fixed: docs/css-variables-reference.md default values resynchronized with the actual code declarations.
Version 22.3.0 - 6/30/26, 12:00 AM
added: Tooltip on truncated event titles. Hovering an event whose title is clipped now reveals the full text through the hub-ui tooltip, applied automatically by ng-hub-ui-utils’ [hubOverflowTooltip] and only when the title actually overflows. Swappable with provideHubTooltip(); requires ng-hub-ui-utils >= 22.6.0 and the tooltip styles.
Version 22.2.0 - 6/26/26, 12:00 AM
changed: Accent system migrated to the open-set "local accent slot" pattern. variant re-bases a single --hub-calendar-accent slot and the role family is derived locally from it with color-mix(in oklch, ...), mirroring the ng-hub-ui-ds engine. The built-in variant list grew from five to the nine canonical accents, and a bare [data-variant] block lets any custom accent work at runtime with one CSS rule.
added: New tokens --hub-calendar-accent-on (grayscale contrast flip driven by the accent’s own lightness) and --hub-calendar-accent-emphasis.
fixed: Migrated the accent color-mix() derivations from srgb to oklch for perceptually uniform tints, matching ng-hub-ui-ds.
Version 22.1.2 - 6/26/26, 12:00 AM
fixed: Corrected the ng-hub-ui-utils peer dependency range to >=1.0.0. The previous caret range (^1.x) resolved to >=1 <2, which excluded the current ng-hub-ui-utils (22.x) and made the peer impossible to satisfy.
Version 22.1.1 - 6/25/26, 12:00 AM
fixed: Design-token consistency pass: inline fallback defaults aligned with the canonical ng-hub-ui-ds values, and hardcoded literals (z-index, font-weight, line-height, radii and theme-aware colours) routed through their --hub-sys-* / --hub-ref-* tokens so they follow the active theme. No visual change when the ds tokens are loaded.
Version 22.1.0 - 6/24/26, 12:00 AM
added: New variant input on <hub-calendar> selecting a semantic accent: variant="success" recolours the today / selected day, the active view button and the event chips. Any other string is also accepted — the accent reads --hub-sys-color-<variant>. New tokens --hub-calendar-accent and --hub-calendar-accent-subtle.
added: New hub-calendar-theme() Sass mixin — theme a calendar in one call: accent, surfaces, header, nav/view buttons, day cells and event chips. Every parameter is optional, so only the ones you pass are emitted as --hub-calendar-* overrides.
fixed: The today cell background and the selected-day / active-button / event colours now derive from --hub-calendar-accent instead of being hard-wired to a fixed blue, so they follow the variant and theme overrides.
changed: Breaking: the uniform padding shorthands (--hub-calendar-day-padding, --hub-calendar-header-padding, --hub-calendar-month-card-padding) were replaced by the canonical directional -padding-x / -padding-y tokens. No visual change; set the -x / -y tokens instead.
Version 22.0.0 - 3/10/26, 12:00 AM
changed: Breaking: the global src/lib/styles/base.scss file was renamed to src/lib/styles/calendar.scss.
changed: Added the host class .hub-calendar directly to the hub-calendar element for better encapsulation.
Version 21.1.1 - 3/19/26, 12:00 AM
changed: Co-locate the SCSS with the component via styleUrl; no manual @use import is needed any more.
changed: Removed the hardcoded design-system token defaults from the stylesheet; they are expected from the host application.
fixed: Fixed grid overflow: min-width: 0 on tracks, day cells and event containers, and full-width clipping on event elements.
Version 21.0.0 - 3/9/26, 12:00 AM
changed: Breaking: the SCSS custom properties were consolidated and prefixed strictly as --hub-calendar-*. See BREAKING_CHANGES.md for the migration.
Version 19.0.3 - 2/9/26, 12:00 AM
changed: Relax the Angular peer dependencies to >=19.0.0.
Version 19.0.2 - 2/5/26, 12:00 AM
changed: Documentation updates and CI/CD workflow integration.
Related libraries
Frequently asked questions
How do I add an event calendar to an Angular app?
Install ng-hub-ui-calendar and pass it an array of CalendarEvent objects with their start and end dates. HubCalendarComponent renders them in the view you choose and handles the month grid, week layout and event positioning, so you only supply the data and decide what a click does.
Does the Angular calendar support a day view?
Yes. CalendarViewType covers month, week and day, and switching between them is a single input, so the same event data renders as a monthly overview or as a detailed daily agenda without reloading or transforming anything.
Can users drag events to reschedule them?
Yes. Events can be dragged to a different day or time slot, and the component emits the change with the event and its new dates. Persisting it is up to you — the calendar reflects the move visually but never writes to your backend on its own.
How do I translate an Angular calendar into another language?
ng-hub-ui-calendar is internationalised: month names, weekday labels and the first day of the week follow the locale you configure, so the same calendar renders correctly in Spanish, German or Japanese without you supplying translated strings.