Calendar
fandhe-frontend-wireframe-ui の月表示グリッド型カレンダー部品です。「ここに月表示の日付ピッカーがある」という配置イメージだけを示す非インタラクティブな部品です。API は calendar(month_label, weeks, selected_day, size) の 4 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
blocks.pm に対応する部品はありません(本部品は fandhe-frontend-wireframe-ui 独自の追加部品です)。参照元となる外部サイトはないため、blocks.pm そのものへのリンクのみ掲載します(詳細は docs/design/wireframe-ui-architecture.md §2)。
前月/翌月の送り矢印・曜日ヘッダーはテキストなしの固定パートとして表示され、月送り・キーボード操作・範囲選択のような実インタラクティブな挙動は実装していません。実際に操作可能な日付ピッカーが必要な場合は Calendar(Themes) / Calendar(Primitives) / Date Picker(Themes) / Date Picker(Primitives) を検討してください。
Demo
既定(選択日なし、5 週)
2026 年 9 月
12345
6789101112
13141516171819
20212223242526
27282930
選択日あり(18 日)
2026 年 9 月
12345
6789101112
13141516171819
20212223242526
27282930
6 週にまたがる月
2026 年 8 月
1
2345678
9101112131415
16171819202122
23242526272829
3031
Sm
2026 年 9 月
12345
6789101112
13141516171819
20212223242526
27282930
Lg
2026 年 9 月
12345
6789101112
13141516171819
20212223242526
27282930
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| month_label | &str | - | ヘッダー中央に表示する月ラベル文言(例: "2026 年 9 月")。 |
| weeks | &[[Option<u32>; 7]] | - | 週ごとに 7 マスの日付配列。Some(日) または空きマス None。6 週を超える入力は先頭 6 週へ飽和する。 |
| selected_day | Option<u32> | None | 選択日。一致する Some(day) を持つ全セルに data-active を付与する。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- blocks.pm 対応なしの独自追加部品: イシュー本文の想定(月ラベル文字列・週ごとに 7 マスの日付配列・任意の選択日)をそのまま
month_label: &str/weeks: &[[Option<u32>; 7]]/selected_day: Option<u32>として受け取り、全既存部品と揃えるためsize: Sizeを 4 番目の引数として追加しました(専用 props 構造体は導入せず、question/radioと同じ位置引数方式)。 - ルートは表示状態軸を持たない:
Active/Disabledはルートには付与しません(questionの「ルートは class のみ」判断と同型)。表示状態は選択日セルだけが持ちます。 - 選択日は既存
props::Activeを再利用: 新規のSelected/Checked型は新設せず、共有ファイルprops.rsは触りません(radio/checkboxの先例と同じ判断軸)。各日セルはSome(day) == selected_dayの一致判定でdata-activeを付与し、同じ日付値が複数セルにある入力では一致する全セルに付与します(単純・決定的な仕様、テストで固定)。 weeksは 6 週へ飽和: 1 か月は最大 6 週にまたがるため、MAX_WEEKS = 6を超える入力は先頭 6 週のみを描画します(textarea::MAX_ROWS・grid::MAX_COLUMNSと同型の資源有界化、A05)。空スライスを渡した場合は曜日ヘッダーのみを描画し panic しません。- 日付値は検証しない:
Some(d)はu32::to_string()でそのまま表示します。0や 32 以上のような妥当性検証はアプリケーションロジックの責務であり、UI コンポーネント層の責務外と判断しました(docs/policy/intentional-non-adoption.md§3.25 の判断軸と同型)。Noneは中身なしの空セル(fw-wire-calendar-day-empty修飾)として出力し、7 列の配置を保ちます。 <table>/<th>は使わない: データテーブル意味論を持ち込まず、div/span+ CSS grid のみで組み立てます(Grid と同じ手法)。- 曜日ヘッダーはテキストなしの固定パート: 曜日ラベル引数はイシューになく、ロケール依存文字列(「日」「Su」等)をハードコードしないため、7 個のテキストなしプレースホルダーを固定パートとして出力します。
- 前月/翌月の送り矢印は装飾アイコンの固定パート: ヘッダーの月ラベル左右に
icon::caret_left/icon::caret_rightを配置しますが、<button>は出力しません(アイコン基盤が付与する装飾用のaria-hidden="true"のみが現れ、対話的 ARIA は出ません)。 style属性・ネイティブ対話要素は一切出力しない:role/aria-*(アイコンのaria-hiddenを除く)/tabindex/style/on*/<button>/<input>/<a href>は出力しません(docs/design/wireframe-ui-architecture.md§7)。- スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本部品は blocks.pm 対応なしの独自追加部品でもあるため、そもそも参照スクリーンショットを持ちません。 - 配色はグレースケール:
--fw-wire-ink/--fw-wire-ink-muted/--fw-wire-fill/--fw-wire-fill-subtleトークンのみを使い、ColorPaletteには依存しません。