Angular カレンダーコンポーネント | ng-hub-ui-calendar
イベントビュー、ドラッグ＆ドロップ、テンプレート、国際化、CSS 変数を備えた Angular カレンダーコンポーネント。スケジューリングインターフェース向けです。
最終更新 2026/08/17
概要
チームがこのライブラリを探す理由
この Angular カレンダーコンポーネントは、カスタマイズ可能なビュー、イベントのレンダリング、ドラッグ＆ドロップ、本番対応のテーマを必要とするスケジューリングインターフェース向けに設計されています。
インストール
npm install ng-hub-ui-calendarジャンプ
最適な用途
- 予約ツール
- チームカレンダー
- リソーススケジューリング
- イベント管理
について calendar
ng-hub-ui-calendar は、再利用可能なカレンダー面を使って、予約ツール・チームのアジェンダ・計画画面を構築できるよう Angular チームを支援します。実際のスケジューリングプロダクトに求められるイベントのレンダリングと操作パターンに対応します。
機能ガイド
ビュー & ナビゲーション
月、週、日、年の各ビューを切り替え、期間を移動します
サンプル:
カレンダービュー
カレンダービュー
August 2026
ナビゲーション
ナビゲーション
イベント
イベントを表示し、イベントおよび日付の操作を処理します
サンプル:
イベント処理
イベント処理
August 2026
イベントコンテンツのオーバーフロー
イベントコンテンツのオーバーフロー
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
drag & drop イベント
drag & drop イベント
Drag events to move them to different days.
August 2026
Drop Log:
No drops yet. Try dragging an event!
テンプレート
テンプレートでイベントと日付セルのレンダリングをカスタマイズします
サンプル:
カスタムテンプレート
カスタムテンプレート
August 2026
設定
設定オプションでカレンダーの動作を調整します
サンプル:
カレンダー設定
カレンダー設定
August 2026
スタイリング & i18n
CSS 変数でテーマを設定し、カレンダーをローカライズします
サンプル:
CSS 変数によるテーマ設定
CSS 変数によるテーマ設定
This example customizes the calendar using --hub-calendar-* CSS variables.
August 2026
国際化（i18n）
国際化（i18n）
Agosto 2026
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.
主な機能
最近の変更
Version 22.6.1 - 8/16/26, 12:00 AM
fixed: The header buttons ignored the locale. Today was written into the template by hand and the view switcher title-cased the enum, while the weekday and month names came from the dictionary — so a calendar with locale="es" rendered "Lun, Mar, Mié" underneath "Today / Month / Week / Day / Year", with nothing a consumer could pass to reconcile them. All five labels now resolve through the same lookup as the day and month names, honouring the injected translation service first and falling back to the built-in dictionary. English is unchanged.
Version 22.6.0 - 8/14/26, 12:00 AM
changed: Labels now resolve HUBUI.CALENDAR.* before the legacy calendar.* branch. The collision-safe namespace lets an application dictionary feed the calendar through provideHubTranslationAdapter() without reserving a top-level calendar key. Existing calendar.* dictionaries keep working — the legacy branch is still the fallback.
changed: Dictionary changes are now reactive. The component tracks translation-source emissions, so switching language refreshes the calendar labels instead of leaving the strings resolved at first render under OnPush.
added: README documentation for the application-wide translation adapter (provideHubTranslationAdapter() from ng-hub-ui-utils).
Version 22.5.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.5.0 - 7/28/26, 12:00 AM
added: WAI-ARIA grid semantics on the month view (grid/row/columnheader/gridcell, aria-selected, aria-current="date", localized full-date labels).
added: Keyboard navigation on the month grid: roving tabindex, arrow keys by day/week, Home/End, PageUp/PageDown across months, Enter/Space to activate a day.
added: Event chips and year-view month cards are keyboard-activatable buttons (role="button", tabindex, Enter/Space); labelled prev/next buttons and aria-pressed view switcher.
added: Starter unit test suite for the component (rendering, navigation, keyboard, ARIA).
fixed: SSR-safe drag-end cleanup: the drag-over class sweep is scoped to the host element instead of the global document.
Version 22.4.1 - 7/26/26, 12:00 AM
fixed: Declared the real ng-hub-ui-utils peer range (>=22.6.0); the previous >=1.0.0 floor resolved to a utils major without HubOverflowTooltipDirective.
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.