Calendar カレンダー

月表示のカレンダーです。DatePicker core の月グリッドアルゴリズムを再利用し、範囲制約と方向キーによるグリッドナビゲーションをサポートします。

基本的な使い方

基本的な使い方

2026年10月

日月火水木金土

<script setup>
import { ref } from 'vue'
const date = ref(new Date())
</script>

<template>
  <LhCalendar v-model="date" />
</template>

<script>
export default {
  data() {
    return { date: new Date() }
  },
}
</script>

<template>
  <LhCalendar v-model="date" />
</template>

期間選択と複数選択

selection は 3 つのモードをサポートします：'single'（デフォルト）/ 'range'（2 回のクリックで開始・終了を決定）/ 'multiple'（クリックで複数日付を切り替え）。

期間選択

2026年10月

日月火水木金土

2026年11月

日月火水木金土

<script setup>
import { ref } from 'vue'
const span = ref([new Date(2026, 8, 5), new Date(2026, 8, 20)])
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

<script>
export default {
  data() {
    return { span: [new Date(2026, 8, 5), new Date(2026, 8, 20)] }
  },
}
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

複数選択

2026年10月

日月火水木金土

<script setup>
import { ref } from 'vue'
const dates = ref([new Date(2026, 8, 10)])
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

<script>
export default {
  data() {
    return { dates: [new Date(2026, 8, 10)] }
  },
}
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

選択可能範囲の制約

範囲制約

2026年10月

日月火水木金土

<script setup>
import { ref } from 'vue'

// 注意：JS の月は 0 始まりです。new Date(2026, 8, 1) は 9 月 1 日です
const range = [new Date(2026, 8, 1), new Date(2026, 8, 28)]
const rangeDate = ref(new Date())
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

<script>
export default {
  data() {
    return {
      // 注意：JS の月は 0 始まりです。new Date(2026, 8, 1) は 9 月 1 日です
      range: [new Date(2026, 8, 1), new Date(2026, 8, 28)],
      rangeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

input 折りたたみ形態

mode="input" は常駐パネルを入力ボックスに収め、クリックで展開します。縦方向のスペースを節約できます。panels は展開後の月パネル数を制御し、placeholder でプレースホルダーテキストをカスタマイズし、close-on-select で選択後に自動的に折りたたむかどうかを決定します。

input 形態 + デュアルパネル

2026年10月

日月火水木金土

2026年11月

日月火水木金土

<script setup>
import { ref } from 'vue'
const inputDate = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="日付を選択してください"
  />
</template>

<script>
export default {
  data() {
    return { inputDate: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="日付を選択してください"
  />
</template>

選択後に自動的に折りたたまない

2026年10月

日月火水木金土

<script setup>
import { ref } from 'vue'
const inputDate2 = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="選択後もパネルを展開したままにする"
  />
</template>

<script>
export default {
  data() {
    return { inputDate2: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="選択後もパネルを展開したままにする"
  />
</template>

API

LhCalendar Props

プロパティ名	説明	型	デフォルト値
modelValue	現在選択されている日付（受控 v-model）	Date | Date[]	—
selection	選択モード：単一選択（デフォルト）/ 期間（開始・終了日）/ 複数選択	"single" | "range" | "multiple"	'single'
range	選択可能な日付範囲の制約	[Date, Date]	—
mode	表示形態	"panel" | "input"	'panel'
panels	同時に表示する月パネル数（flex で折り返して配置）	number	1
placeholder	input モードのプレースホルダーテキスト	string	—
closeOnSelect	input モードで選択後にパネルを自動的に折りたたむかどうか	boolean	true
sx	sx クイックレイアウトプロパティ	LhSxProps	—

Events

イベント名	説明	コールバック
update:modelValue	選択値が変化したときに発火します（v-model）	(value: Date | Date[])
change	選択値が変化したときに発火します	(value: Date | Date[])
select	日付を選択したときに発火します（クリックまたはキーボードナビゲーション）	(value: Date)

スロット：cell（カスタムセル）、header（ヘッダー）。

アクセシビリティ

• グリッドセマンティック role="grid"（行 row、セル gridcell）。当日に aria-current="date" を付与します
• 方向キーで日付フォーカスを移動し（±1 日 / ±7 日）、Home/End で行の先頭・末尾、PageUp/Down で月を切り替えます。APG grid pattern に準拠しています
• 範囲外の日付はネイティブの disabled でインタラクションから外します

型定義

このコンポーネントが外部にエクスポートする TypeScript の型構造を以下に示します（packages/components/calendar/src/types.ts および @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義が表示されます。プロパティの説明は上の Props 表を参照してください）：

LhCalendarMode

/** 表示形態：panel は常駐パネル（デフォルト）/ input は入力ボックスのクリックで展開する折りたたみパネル */
export type LhCalendarMode = 'panel' | 'input'

LhCalendarValue

/** 受控値の形は selection に応じて変化します：単一選択は Date / 期間は長さ 2 の開始・終了 Date[] / 複数選択は Date[]。
 *  [Date, Date] タプルを使わない理由：SFC コンパイラがタプルからランタイム型を推論できず、prop 検証の警告が出るためです */
export type LhCalendarValue = Date | Date[]

LhCalendarProps

export interface LhCalendarProps {
  /** 現在の選択（受控 v-model。未指定時はコンポーネント内部が選択状態を管理します） */
  modelValue?: LhCalendarValue
  /** 選択モード：単一選択（デフォルト）/ 期間（開始・終了日）/ 複数選択 */
  selection?: LhCalendarSelection
  /** 選択可能な日付範囲の制約 */
  range?: LhCalendarRange
  /** 表示形態：panel は常駐パネル（デフォルト）/ input は入力ボックスのクリックで展開する折りたたみパネル */
  mode?: LhCalendarMode
  /** 同時に表示する月パネル数（flex で折り返して配置） */
  panels?: number
  /** input モードのプレースホルダーテキスト */
  placeholder?: string
  /** input モードで選択後にパネルを自動的に折りたたむかどうか */
  closeOnSelect?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhCalendarSelection _{（@lh-ui/share/core/calendar より）}

/** 選択モード：単一選択 / 期間（開始・終了）/ 複数選択 */
export type LhCalendarSelection = 'single' | 'range' | 'multiple'

LhCalendarRange _{（@lh-ui/share/core/calendar より）}

/** 選択可能な日付範囲の制約 */
export type LhCalendarRange = [Date, Date]