Calendar

Demo

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）・複数月表示・年/月ビュー切替は本コンポーネントのスコープ外（単一日付の選択のみを扱う）。
• ark-ui/zag の data-focus/data-view/data-weekend/data-unavailable/range 系属性は出力しない（DOM ローカル状態・ビュー概念なし・locale 依存・range mode スコープ外のため。#1625 参考サイト突合結果）。
• パート名 table-header（<thead>）/table-head-cell（<th>）は ark-ui（table-head/table-header）とはパート名の対応が入れ替わっている（本実装は要素の役割をそのまま表す命名）。
• キーボード操作（矢印キー等での日付移動）は fandhe-frontend-wasm-full の keynav 配線（#1074/#1161）が担う。本コンポーネント（SSR 単体）はネイティブ <button> の Tab / Enter / Space のみを提供する。

API Reference

Arguments

Data Attributes

Examples

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

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

自前 CSS の最小例

headless-ui 自体はスタイルを持たないため、data-scope/data-part/data-selected/data-today/data-outside-month/data-disabled 属性セレクタで見た目を組み立てる最小例です。

[data-scope="calendar"][data-part="table"] {
  border-collapse: collapse;
}
[data-scope="calendar"][data-part="day-trigger"] {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 4px;
}
[data-scope="calendar"][data-part="day-trigger"][data-selected] {
  background: #2563eb;
  color: #fff;
}
[data-scope="calendar"][data-part="day-trigger"][data-today] {
  font-weight: bold;
}
[data-scope="calendar"][data-part="day-trigger"][data-outside-month] {
  color: #9ca3af;
}
[data-scope="calendar"][data-part="day-trigger"][data-disabled] {
  opacity: 0.4;
}
[data-scope="calendar"][data-part="prev-trigger"]:focus-visible,
[data-scope="calendar"][data-part="next-trigger"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Accessibility

Keyboard Interactions

WAI-ARIA