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 Aug 17, 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
August 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.
August 2026
Drag & Drop Events
Drag & Drop Events
Drag events to move them to different days.
August 2026
Drop Log:
No drops yet. Try dragging an event!
Templates
Customize event and day-cell rendering with templates
Examples:
Custom Templates
Custom Templates
August 2026
Configuration
Tune calendar behavior through configuration options
Examples:
Calendar Configuration
Calendar Configuration
August 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.
August 2026
Internationalization (i18n)
Internationalization (i18n)
Agosto 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.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 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.
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.