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

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

概要

チームがこのライブラリを探す理由

この 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