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

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

概览

团队为何搜索这个库

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

安装

npm install ng-hub-ui-calendar

跳转到

适用于

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

关于 calendar

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

功能指南

视图与导航

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

示例:
日历视图

日历视图

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Team Meeting
Lunch Break
27
Project Deadline
28
29
30
1
2
3
4
5
6
7
8
9
10
11
导航

导航

Current Date: Friday, June 26, 2026

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Today's Event
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Navigation Log:

事件

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

示例:
事件处理

事件处理

June 2026

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

事件内容溢出

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.

June 2026

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

Drag & drop 事件

Drag events to move them to different days.

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
Movable Meeting
27
Reschedule This
28
Flexible Task
29
30
1
2
3
4
5
6
7
8
9
10
11

Drop Log:

No drops yet. Try dragging an event!

模板

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

示例:
自定义模板

自定义模板

June 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
262 events
271 events
28
29
30
1
2
3
4
5
6
7
8
9
10
11

配置

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

示例:
日历配置

日历配置

June 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
Morning Standup
Lunch Break
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12

样式与 i18n

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

示例:
CSS 变量主题

CSS 变量主题

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

June 2026

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

国际化（i18n）

June 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
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
International Meeting
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12

i18n Support:

The calendar uses ng-hub-ui-utils TranslatePipe for labels.

Configure translations via provideHubTranslation() with the CALENDAR_I18N dictionary.

核心特性

最近更改

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