API リファレンス

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

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

名前	型	デフォルト	説明
`events`	`CalendarEvent<T>[]`	`[]`	カレンダーに表示するイベントの配列
`view`	`'month' \| 'week' \| 'day' \| 'year'`	`'month'`	現在のビュータイプ（viewChange による双方向バインディング）
`selectedDate`	`Date`	`new Date()`	現在フォーカスされている日付（dateChange による双方向バインディング）
`config`	`CalendarConfig`	`{}`	カレンダーの設定オプション
`eventClass`	`string \| ((event: CalendarEvent) => string)`	`undefined`	イベントに適用する CSS クラス。静的または動的に指定できます
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	週の開始曜日（0 = 日曜、1 = 月曜など）

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

名前	型	説明
`eventClick`	`CalendarEvent<T>`	イベントがクリックされたときに発行されます
`dayClick`	`CalendarDay<T>`	日付セルがクリックされたときに発行されます
`eventDrop`	`{ event: CalendarEvent<T>; newDate: Date; previousDate: Date }`	イベントが別の日にドロップされたときに発行されます
`viewChange`	`CalendarViewType`	ビュータイプが変化したときに発行されます
`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>`

CSS 変数はまだドキュメント化されていません。

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。