Calendar
fandhe-frontend-pre-styled-ui の calendar mod が提供するスタイル済み Calendar 部品です。Today / Clear のようなプリセット操作行は button 部品との合成で再現できます。枠線なし・大セル月表示は Examples 節を参照してください。週・日の時間軸ビューは table 部品との合成で再現できます（Examples 節参照）。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
headless-ui の Calendar（role="grid"）に pre-styled-ui の recipe CSS を適用した静的掲示です。2026-07 を週開始 Monday で表示し、今日（07-22）・選択日（07-15）・表示月外セルの見た目を固定表示しています。キーボードナビゲーション・クリック挙動は wasm 層のスコープ外です。
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Features
- role="grid" の月グリッド静的掲示（headless-ui の Calendar に recipe CSS を適用）
- 今日・選択日・表示月外セルの見た目を data-* 属性連動で区別する
- キーボードナビゲーション・クリック挙動は wasm 層のスコープ（本ページは SSR 静的表示）
- Today / Clear のようなプリセット操作行は button 部品との合成で再現する（静的掲示、実挙動はアプリ側）
- root_with 経由で variant（outline / plain）・cell-size（compact / large）を opt-in 提供（枠線なしの小型カレンダー・大セル月表示、イシュー #3132）
- 週・日の時間軸ビュー（行=時刻スロット、列=日付）は table（+ badge）の合成で再現する（本体非拡張、静的掲示）
Anatomy
root
heading
prev-trigger
next-trigger
table
table-header
table-row
table-head-cell
table-body
table-cell
day-triggerAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
size | Size | Md | 寸法 variant。 |
attrs | Vec<(&str, &str)> | — | root パーツへ合成する追加属性。 |
children | Vec<Node> | — | root 配下の子ノード（通常 Heading/Table を含む）。 |
variant | CalendarVariant | Outline | root_with 専用。見た目 variant（Outline: 枠線あり既定 / Plain: 枠線なし）。 |
cell_size | CalendarCellSize | Compact | root_with 専用。セル寸法軸（Compact: 正方形日セル既定 / Large: 全幅 7 列等幅の大セル月表示）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
day-trigger | data-outside-month | （値なし） |
day-trigger | data-selected | （値なし） |
day-trigger | data-today | （値なし） |
day-trigger | data-value | 2026-06-29, 2026-06-30, 2026-07-01, 2026-07-02, 2026-07-03, 2026-07-04, 2026-07-05, 2026-07-06, 2026-07-07, 2026-07-08, 2026-07-09, 2026-07-10, 2026-07-11, 2026-07-12, 2026-07-13, 2026-07-14, 2026-07-15, 2026-07-16, 2026-07-17, 2026-07-18, 2026-07-19, 2026-07-20, 2026-07-21, 2026-07-22, 2026-07-23, 2026-07-24, 2026-07-25, 2026-07-26, 2026-07-27, 2026-07-28, 2026-07-29, 2026-07-30, 2026-07-31, 2026-08-01, 2026-08-02 |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-calendar-cell-height | var(--fandhe-space-24) |
--fandhe-calendar-day-size | var(--fandhe-space-8) |
--fandhe-calendar-root-padding | var(--fandhe-space-3) |
Examples
2026-07 の月グリッド
週開始 Monday で、今日（07-22）・選択日（07-15）を固定表示します。
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Today / Clear プリセットボタン行
月グリッドの下に button 部品（Outline・Sm）で Today / Clear のプリセット操作行を並べます。既存の calendar / button パーツの合成のみで再現でき、実際の「今日へ移動」「選択解除」の挙動はアプリケーション側（wasm 層）で配線します（本ページは静的表示）。
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
枠線なし（Plain variant）
root_with(Size::Md, CalendarVariant::Plain, CalendarCellSize::Compact, …) で root の外枠を消した小型カレンダーです。
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
大セル月表示（Large cell-size）
root_with(Size::Sm, CalendarVariant::Outline, CalendarCellSize::Large, …) で全幅 7 列等幅のセルを作り、各セル左上の日付の下へ予定（badge）を並べる月間スケジュール表示です。
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Design review | ||||||
1on1 Release cut | ||||||
Sprint planning | ||||||
週ビュー（時間軸グリッド）
2026-07-20（Mon）〜07-26（Sun）の 7 列を table（+ badge）の合成で時間軸グリッドとして表示します。本体（calendar）は無変更、table / badge の合成のみで再現し静的表示（予定の作成・ドラッグ等は実装しません）。
| Mon 07/20 | Tue 07/21 | Wed 07/22 | Thu 07/23 | Fri 07/24 | Sat 07/25 | Sun 07/26 | |
|---|---|---|---|---|---|---|---|
| 09:00 | Standup | ||||||
| 10:00 | Design Review | ||||||
| 11:00 | |||||||
| 12:00 | Client Call | ||||||
| 13:00 | |||||||
| 14:00 | |||||||
| 15:00 | Backlog Grooming | ||||||
| 16:00 | |||||||
| 17:00 |
日ビュー（時間軸グリッド）
2026-07-22（Wed、今日）の 1 列を table（+ badge）の合成で時間軸グリッドとして表示します。本体（calendar）は無変更、table / badge の合成のみで再現し静的表示（予定の作成・ドラッグ等は実装しません）。
| Wed 07/22 | |
|---|---|
| 09:00 | Standup |
| 10:00 | |
| 11:00 | Design Review |
| 12:00 | |
| 13:00 | |
| 14:00 | |
| 15:00 | 1:1 with Manager |
| 16:00 | |
| 17:00 |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| ArrowLeft / ArrowRight / ArrowUp / ArrowDown | 日付グリッド内をフォーカス移動する（wasm 層実装）。 |
| Enter / Space | フォーカス中の日付を選択する（wasm 層実装）。 |
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-selected | 選択中の日付セルに付与する。 |