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

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

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

日历视图

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
Office Closed
Team Meeting9时
Client Call10时
+1 more
1
Project Deadline
2
3
4
5
6
7
8
9
10

导航

Current Date: Wednesday, September 30, 2026

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
Today's Event
1
2
3
4
5
6
7
8
9
10

Navigation Log:

紧凑迷你月历

Team calendar

A dashboard card, 370px wide

September 2026

日
一
二
三
四
五
六
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
1
2
3
4
5
6
7
8
9
10

The same events, the same [height], without compact

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
Sprint planning9时
4
5
6
7
8
9
Design review16时
10
11
12
13
14
Payroll cut-off
15
16
17
18
19
20
21
Release 4.218时
22
23
24
25
26
27
Client workshop10时
28
29
30
1
2
3
4
5
6
7
8
9
10

A height alone does not make a calendar fit, because the cells have floors of their own: a day cell asks for 80px and a week row for 100px, so six rows cost 600px before a date is drawn and the full-size calendar spends its 250px showing the first week. compact lifts both floors — same box, whole month.

紧凑模式配自己的导航

September 2026

日
一
二
三
四
五
六
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
1
2
3
4
5
6
7
8
9
10

previous(), next() and goToToday() are public, so <hub-calendar #cal compact> drives the month from chrome of your own — two chevrons here, a swipe or a pair of links elsewhere. From outside the template, [(selectedDate)] moves it just as well.

只有一个视图时不画切换器

availableViews: [MONTH] — no switcher

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
Onboarding: Marta10时
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo17时
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

availableViews: [MONTH, WEEK] — switcher

September 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
30
31
1
2
3
4
5
6
Onboarding: Marta10时
7
8
9
10
11
12
13
14
15
Security audit
16
17
18
19
20
21
22
Customer demo17时
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

A switcher offering one choice is not a switcher: the button could only ever repaint its own pressed state, and it was still taking a button's worth of the header. Nothing to opt into — narrow config.availableViews to one view and the row goes, in a full-size calendar as in a compact one.

星期缩写由语言决定

September 2026

S
M
T
W
T
F
S
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
1
2
3
4
5
6
7
8
9
10

S M T W T F S in English, D L M X J V S in Spanish. Compact narrows the weekday headers to the locale's own initials, which come from Intl and not from the dictionary — Spanish will not give you a usable initial by slicing a name, because martes and miércoles both start with M, and that is why its Wednesday is an X. An explicit [weekdayFormat] still wins.

事件处理

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
Important Meeting21:01
1
Casual Lunch1:01
Project Review21:01
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
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
LONG_EVENT_IDENTIFIER_WITHOUT_BREAKS_2026_RELEASE_READINESS_CHECKLIST_PHASE_ALPHA_001
2
3
Cross-team review with architecture, platform, QA, operations, and compliance stakeholders
4
5
Customer workshop: scope alignment, backlog refinement, and technical constraints review
6
7
8
9
10

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
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
Movable Meeting21:01
1
Reschedule This
2
Flexible Task21:01
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
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
302 events
11 events
2
3
4
5
6
7
8
9
10

日期与时间格式

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
Company Offsite
Team Sync9时
Client Call13:40
+1 more
1
2
3
4
5
6
7
8
9
10

日历配置

September 2026

Wk
Mon
Tue
Wed
Thu
Fri
Sat
Sun
36
31
1
2
3
4
5
6
37
7
8
9
10
11
12
13
38
14
15
16
17
18
19
20
39
21
22
23
24
25
26
27
40
28
29
30
Morning Standup9时
Lunch Break12时
1
2
3
4
41
5
6
7
8
9
10
11

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
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
Design Review10时
1
Client Call
2
Roadmap Planning
3
4
5
6
7
8
9
10

语义强调色（variant）

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
Design Review21:01
1
2
Release Window21:01
3
4
5
6
7
8
9
10

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.

国际化（i18n）

Septiembre 2026

Lun
Mar
Mié
Jue
Vie
Sáb
Dom
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
International Meeting
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.