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

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

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

一般的な 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.