Calendar

fandhe-frontend-pre-styled-ui の calendar mod が提供するスタイル済み Calendar 部品です。

Demo

headless-ui の Calendar（role="grid"）に pre-styled-ui の recipe CSS を適用した静的掲示です。2026-07 を週開始 Monday で表示し、今日（07-22）・選択日（07-15）・表示月外セルの見た目を固定表示しています。キーボードナビゲーション・クリック挙動は wasm 層のスコープ外です。

July 2026

Features

role="grid" の月グリッド静的掲示（headless-ui の Calendar に recipe CSS を適用）
今日・選択日・表示月外セルの見た目を data-* 属性連動で区別する
キーボードナビゲーション・クリック挙動は wasm 層のスコープ（本ページは SSR 静的表示）

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
size	Size	Md	寸法 variant。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		root 配下の子ノード（通常 Heading/Table を含む）。

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-day-size	var(--fandhe-space-8)
--fandhe-calendar-root-padding	var(--fandhe-space-3)

Examples

2026-07 の月グリッド

週開始 Monday で、今日（07-22）・選択日（07-15）を固定表示します。

July 2026

Accessibility

Keyboard Interactions

Key	Description
ArrowLeft / ArrowRight / ArrowUp / ArrowDown	日付グリッド内をフォーカス移動する（wasm 層実装）。
Enter / Space	フォーカス中の日付を選択する（wasm 層実装）。

WAI-ARIA

Attribute	Description
aria-selected	選択中の日付セルに付与する。

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su