Angular 日历组件 | ng-hub-ui-calendar

Angular 日历组件，支持事件视图、拖放、模板、国际化和 CSS 变量，适用于日程安排界面。

最后更新 2026年9月1日

概览

团队为何搜索这个库

这个 Angular 日历组件专为需要可定制视图、事件渲染、拖放和生产就绪主题的日程安排界面而设计。

安装

npm install ng-hub-ui-calendar

跳转到

适用于

  • 预订工具
  • 团队日历
  • 资源排程
  • 事件管理

关于 calendar

ng-hub-ui-calendar 帮助 Angular 团队用一个可复用的日历界面构建预订工具、团队日程和规划页面。它支持真实日程产品中所期待的那类事件渲染和交互模式。

功能指南

视图与导航

在月、周、日和年视图之间切换，并在不同时间段间移动

示例:
日历视图

日历视图

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
Team Meeting
Lunch Break
6
Project Deadline
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
导航

导航

Current Date: Saturday, September 5, 2026

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
Today's Event
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

Navigation Log:

事件

显示事件并处理事件与日期的交互

示例:
事件处理

事件处理

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
Important Meeting
Casual Lunch
6
Project Review
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
事件内容溢出

事件内容溢出

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

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
LONG_EVENT_IDENTIFIER_WITHOUT_BREAKS_2026_RELEASE_READINESS_CHECKLIST_PHASE_ALPHA_001
7
8
Cross-team review with architecture, platform, QA, operations, and compliance stakeholders
9
10
Customer workshop: scope alignment, backlog refinement, and technical constraints review
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
Drag & drop 事件

Drag & drop 事件

Drag events to move them to different days.

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
Movable Meeting
6
Reschedule This
7
Flexible Task
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

Drop Log:

No drops yet. Try dragging an event!

模板

使用模板自定义事件和日期单元格的渲染

示例:
自定义模板

自定义模板

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
52 events
61 events
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

配置

通过配置选项调整日历行为

示例:
日历配置

日历配置

September 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
31
1
2
3
4
5
Morning Standup
Lunch Break
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
11

样式与 i18n

通过 CSS 变量设置主题并本地化日历

示例:
CSS 变量主题

CSS 变量主题

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

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
Design Review
6
Client Call
7
Roadmap Planning
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
国际化（i18n）

国际化（i18n）

Septiembre 2026

Lun
Mar
Mié
Jue
Vie
Sáb
Dom
31
1
2
3
4
5
International Meeting
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
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.

核心特性

最近更改

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.

相关库

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-paginable