Calendar

月表示と単一日付の選択を、WAI-ARIA の grid パターンに従った 11 個の anatomy パーツ（Root/Heading/PrevTrigger/NextTrigger/Table/…/DayTrigger）として提供する unstyled 部品です。「今日」は呼び出し側が明示的に渡す引数であり、内部で時刻取得 API を使わない決定的な設計です。

Themes 版（fandhe-frontend-pre-styled-ui）はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Calendar を参照してください。

日付の実在性検証以外の入力値検証・ロケール依存の日付整形・フォーム送信処理は本部品の責務外であり、利用側が担います。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

July 2026

Su

Features

Root/Heading/PrevTrigger/NextTrigger/Table/TableHeader/TableRow/TableHeadCell/TableBody/TableCell/DayTrigger の 11 anatomy パーツを提供し、月表示・単一日付選択・min/max 範囲制約を持つ状態機械 `Calendar` を組み合わせる。
「今日」は `Calendar::new` の `today` 引数として呼び出し側が明示的に渡す。`SystemTime`/`Instant`/`js_sys` 等の時刻取得 API を内部で一切使わない決定的な設計であり、同一入力から常に同一出力を返す。
`table` に `role="grid"`、`table_row` に `role="row"`、`table_head_cell` に `role="columnheader"`、`table_cell` に `role="gridcell"` + `aria-selected` を付与し、WAI-ARIA APG の grid パターンに従う。
`day_trigger` は選択日に `data-selected`、今日に `data-today` + `aria-current="date"`、表示月外の日付に `data-outside-month`、min/max 範囲外の日付に `data-disabled` + ネイティブ `disabled` + `aria-disabled` を出力する。
範囲選択（range mode）・複数月表示・年/月ビュー切替は本コンポーネントのスコープ外（単一日付の選択のみを扱う）。

Anatomy

root
  heading
  prev-trigger
  next-trigger
  table
    table-header
      table-row
        table-head-cell
    table-body
        table-cell
          day-trigger

API Reference

Arguments

Name	Type	Default	Description
view_year	i32	（必須）	表示する年（`0000..=9999`）。範囲外は `DateError::OutOfRange`。
view_month	u8	（必須）	表示する月（`1..=12`）。
today	PlainDate	（必須）	「今日」として扱う日付。呼び出し側が明示的に渡す（内部で時刻取得 API を使わない決定的設計）。
selected	Option<PlainDate>	None	現在選択中の日付。
min / max	Option<PlainDate>	None	選択可能範囲の下限・上限。ともに `Some` で `min > max` なら `DateError::InvalidDate`。
week_start	Weekday	（必須）	週の開始曜日。

Data Attributes

Part	Attribute	Observed Values
day-trigger	data-selected
day-trigger	data-today
day-trigger	data-value	2026-07-25

Examples

範囲外の日付・前月移動の無効化

`day_trigger` の `disabled` と `prev_trigger` の `disabled` を `true` にすると、min/max 範囲外であることを示す `data-disabled`・ネイティブ `disabled`・`aria-disabled` が出力されます。

Accessibility

Keyboard Interactions

Key	Description
Tab	`prev_trigger`/`next_trigger`/`day_trigger` はいずれもネイティブ `<button type="button">` であり、ブラウザ既定のフォーカス順で到達する（無効化時は `disabled` によりフォーカス対象から除外される）。
Space / Enter	フォーカス中の `prev_trigger`/`next_trigger`/`day_trigger` をブラウザ既定動作で押下する。

WAI-ARIA

Attribute	Description
role	`table` に `"grid"`、`table_row` に `"row"`、`table_head_cell` に `"columnheader"`、`table_cell` に `"gridcell"` を固定付与する。
aria-selected	`table_cell` へ選択状態を反映する（`day_trigger` の `data-selected` とセットで選択状態を二重に表現する、WAI-ARIA grid パターンの慣行）。
aria-current	今日の `day_trigger` へ `"date"`（`AriaCurrent::Date`）を付与する。
aria-disabled	min/max 範囲外の `day_trigger`、範囲下限/上限に到達した `prev_trigger`/`next_trigger` へ `"true"` を付与する。
aria-labelledby	`table` の `labelledby` が `Some` のとき、`heading` の `id` と対で関連付ける。