API リファレンス

calendar の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

17 個のインプットで calendar を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`variant`	`string`	`undefined`	今日と選択中の日、アクティブなビューボタン、イベントチップに適用されるセマンティックアクセント: primary、secondary、success、danger、warning、info、neutral、light、dark、または --hub-sys-color-<variant> として読み取られる任意の名前。
`events`	`CalendarEvent<T>[]`	`[]`	カレンダーに表示するイベントの配列
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	現在のビュータイプ（viewChange による双方向バインディング）
`selectedDate`	`Date`	`new Date()`	現在フォーカスされている日付（selectedDateChange による双方向バインディング）
`config`	`CalendarConfig`	`{}`	カレンダーの設定オプション
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	イベントに適用する CSS クラス。静的または動的に指定できます
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`undefined`	週の開始曜日（0 = 日曜、1 = 月曜など）。指定するとconfig.weekStartsOnより優先されます。未指定の場合は設定側が決定し、その既定値は0です。
`locale`	`string`	`'en'`	組み込み辞書の言語コード。英語とスペイン語はライブラリに同梱され、それ以外のコードは英語にフォールバックします。
`height`	`number \| string`	`undefined`	カレンダーの高さ。スクロールするか伸びるかもこれで決まります。数値はピクセルとして読まれ、任意の CSS 長さが使えます。`auto` はスクロールせず内容に合わせて伸びます。未指定ならコンテナいっぱいに広がります。スタイルシートで指定するより安全です。スコープ付きの `hub-calendar { … }` セレクターはコンポーネント自身のレイアウトに勝ち、それを壊すことがあります。
`displayFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	ヘッダーの見出しが月と年をどう書くか。Intl のオプション、`MMMM yyyy` のような Angular の日付パターン、または関数を受け取ります。未指定なら組み込みの組み立てを使い、見出しが年を指す年表示はそのままです。
`timeDisplayFormat`	`Intl.DateTimeFormatOptions`	`{ hour: 'numeric', minute: '2-digit' }`	チップと日付のツールチップに出る時刻の Intl オプション。`hourFormat` と組み合わされます。既定は時と分です。
`eventTimeFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	月表示のチップが時刻付きイベントの前に印字する時刻。未指定なら狭いセル向けの省略形のままで、分がゼロのときは省かれます。
`slotLabelFormat`	`Intl.DateTimeFormatOptions \| string \| ((date: Date) => string)`	`undefined`	週表示と日表示の時刻目盛りのラベル。未指定なら従来どおり素の `9:00` のままで、`hourFormat` を指定するだけで本物の時計になります。
`hourFormat`	`'12' \| '24'`	`undefined`	カレンダーが時刻を書くすべての場所で 12 時間制か 24 時間制かを固定します。未指定なら言語が決めます。`hub-datepicker` と同じ意味です。
`weekdayFormat`	`'short' \| 'narrow' \| 'long'`	`'short' ('narrow' when compact)`	曜日の列見出しの幅。`short` と `long` はカレンダー自身の辞書を読むのでアプリケーションの辞書が届きます。`narrow` は辞書に項目がなく、ロケールから導かれます。
`monthFormat`	`'short' \| 'long'`	`'long'`	ヘッダーの見出しと年表示のカードで月をどう書くか。既定は `long` で、カレンダーがこれまで印字してきたものです。
`compact`	`boolean`	`false`	カレンダーをミニ月表示にします。ツールバーが消え、日と週の高さの下限も消え、曜日見出しはロケールの頭文字まで縮み、予定のある日はチップではなく点で示されます。月の見出しは残ります。`booleanAttribute` で変換されるため、`compact` 属性を書くだけで有効になります。

アウトプット

calendar の動作に反応 — ロジックを接続できる 6 個のイベント。

名前	型	説明
`eventClick`	`CalendarEvent<T>`	イベントがクリックされたときに発行されます
`dayClick`	`CalendarDay<T>`	日付セルがクリックされたときに発行されます
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	イベントが別の日にドロップされたときに発行されます
`viewChange`	`CalendarViewType`	ビュータイプが変化したときに発行されます
`selectedDateChange`	`Date`	選択された日付が変化したときに発行されます。[(selectedDate)] による双方向バインディングをサポートします
`dateChange`	`Date`	ナビゲーションにより表示日付が変化したときに発行されます

テンプレート

自分好みに — 2 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`eventTpt`	個々のイベントをレンダリングするためのテンプレート。コンテキスト: { event: CalendarEvent }	`<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>`
`dayCellTpt`	日付セルのレンダリングをカスタマイズするためのテンプレート。コンテキスト: { day: CalendarDay }	`<ng-template dayCellTpt let-day="day">{{ day.date \| date }}</ng-template>`