Angular カレンダーコンポーネント | ng-hub-ui-calendar

イベントビュー、ドラッグ＆ドロップ、テンプレート、国際化、CSS 変数を備えた Angular カレンダーコンポーネント。スケジューリングインターフェース向けです。

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

カレンダービュー

August 2026

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

ナビゲーション

Current Date: Thursday, August 27, 2026

August 2026

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

Navigation Log:

イベント処理

August 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
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
Important Meeting
Casual Lunch
28
Project Review
29
30
31
1
2
3
4
5

イベントコンテンツのオーバーフロー

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

Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
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
LONG_EVENT_IDENTIFIER_WITHOUT_BREAKS_2026_RELEASE_READINESS_CHECKLIST_PHASE_ALPHA_001
29
30
Cross-team review with architecture, platform, QA, operations, and compliance stakeholders
31
1
Customer workshop: scope alignment, backlog refinement, and technical constraints review
2
3
4
5

drag & drop イベント

Drag events to move them to different days.

August 2026

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

Drop Log:

No drops yet. Try dragging an event!

カスタムテンプレート

August 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
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
272 events
281 events
29
30
31
1
2
3
4
5

カレンダー設定

August 2026

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

CSS 変数によるテーマ設定

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

August 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
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
Design Review
28
Client Call
29
Roadmap Planning
30
31
1
2
3
4
5

国際化（i18n）

Agosto 2026

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

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.