Radix Vue

外観

範囲カレンダー ​

アルファ
日付範囲を選択するために調整されたカレンダービューを表示します。
イベント日、2024年10月
2024年10月
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import type { DateValue } from '@internationalized/date'
import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot } from 'radix-vue'

function isDateUnavailable(date: DateValue) {
  return date.day === 17 || date.day === 18
}
</script>

<template>
  <RangeCalendarRoot
    v-slot="{ weekDays, grid }"
    :is-date-unavailable="isDateUnavailable"
    class="rounded-xl bg-white p-4 shadow-xl"
    fixed-weeks
  >
    <RangeCalendarHeader class="flex items-center justify-between">
      <RangeCalendarPrev
        class="inline-flex items-center cursor-pointer text-black justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
      >
        <Icon
          icon="radix-icons:chevron-left"
          class="w-6 h-6"
        />
      </RangeCalendarPrev>
      <RangeCalendarHeading class="text-[15px] text-black font-medium" />
      <RangeCalendarNext
        class="inline-flex items-center cursor-pointer justify-center text-black rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
      >
        <Icon
          icon="radix-icons:chevron-right"
          class="w-6 h-6"
        />
      </RangeCalendarNext>
    </RangeCalendarHeader>
    <div
      class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
    >
      <RangeCalendarGrid
        v-for="month in grid"
        :key="month.value.toString()"
        class="w-full border-collapse select-none space-y-1"
      >
        <RangeCalendarGridHead>
          <RangeCalendarGridRow class="mb-1 grid w-full grid-cols-7">
            <RangeCalendarHeadCell
              v-for="day in weekDays"
              :key="day"
              class="rounded-md text-xs text-green8"
            >
              {{ day }}
            </RangeCalendarHeadCell>
          </RangeCalendarGridRow>
        </RangeCalendarGridHead>
        <RangeCalendarGridBody class="grid">
          <RangeCalendarGridRow
            v-for="(weekDates, index) in month.rows"
            :key="`weekDate-${index}`"
            class="grid grid-cols-7"
          >
            <RangeCalendarCell
              v-for="weekDate in weekDates"
              :key="weekDate.toString()"
              :date="weekDate"
            >
              <RangeCalendarCellTrigger
                :day="weekDate"
                :month="month.value"
                class="relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 "
              />
            </RangeCalendarCell>
          </RangeCalendarGridRow>
        </RangeCalendarGridBody>
      </RangeCalendarGrid>
    </div>
  </RangeCalendarRoot>
</template>

クレジット

このコンポーネントは、melt-uiの実装からインスピレーションを得て構築されました。

機能 ​

  • 完全なキーボードナビゲーション
  • 制御も非制御も可能
  • フォーカスは完全に管理されています
  • ローカライズ対応
  • 高度に構成可能

序文 ​

このコンポーネントは、JavaScriptで日付と時間を扱う際に発生する多くの問題を解決する、@internationalized/date パッケージに依存しています。

パッケージのドキュメントをよく読んで、その動作をしっかり理解することを強くお勧めします。また、日付関連のコンポーネントを使用するには、プロジェクトにインストールする必要があります。

インストール ​

日付パッケージをインストールします。

sh
$ npm add @internationalized/date

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構造 ​

すべてのパーツをインポートして組み合わせます。

vue
<script setup>
import {
  RangeCalendarCell,
  RangeCalendarCellTrigger,
  RangeCalendarGrid,
  RangeCalendarGridBody,
  RangeCalendarGridHead,
  RangeCalendarGridRow,
  RangeCalendarHeadCell,
  RangeCalendarHeader,
  RangeCalendarHeading,
  RangeCalendarNext,
  RangeCalendarPrev,
  RangeCalendarRoot
} from 'radix-vue'
</script>

<template>
  <RangeCalendarRoot>
    <RangeCalendarHeader>
      <RangeCalendarPrev />
      <RangeCalendarHeading />
      <RangeCalendarNext />
    </RangeCalendarHeader>
    <RangeCalendarGrid>
      <RangeCalendarGridHead>
        <RangeCalendarGridRow>
          <RangeCalendarHeadCell />
        </RangeCalendarGridRow>
      </RangeCalendarGridHead>
      <RangeCalendarGridBody>
        <RangeCalendarGridRow>
          <RangeCalendarCell>
            <RangeCalendarCellTrigger />
          </RangeCalendarCell>
        </RangeCalendarGridRow>
      </RangeCalendarGridBody>
    </RangeCalendarGrid>
  </RangeCalendarRoot>
</template>

APIリファレンス ​

ルート ​

カレンダーのすべてのパーツを含みます

Propデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

calendarLabel
string

カレンダーのアクセス可能なラベル

defaultPlaceholder
DateValue

デフォルトのプレースホルダー日付

defaultValue
{ start: undefined, end: undefined }
DateRange

カレンダーのデフォルト値

dir
'ltr' | 'rtl'

適用可能な場合のカレンダーの読み取り方向。
省略した場合、ConfigProviderからグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
false
boolean

カレンダーが無効かどうか

fixedWeeks
false
boolean

カレンダーに常に6週間表示するかどうか

initialFocus
false
boolean

trueの場合、カレンダーがマウントされたときに表示されているものに応じて、選択された日、今日、または月の最初の日をフォーカスします

isDateDisabled
Matcher

日付が無効かどうかを返す関数

isDateUnavailable
Matcher

日付が利用可能かどうかを返す関数

locale
'en'
string

日付のフォーマットに使用するロケール

maxValue
DateValue

選択できる最大日付

minValue
DateValue

選択できる最小日付

modelValue
DateRange

カレンダーの制御されたチェック状態。v-modelとしてバインドできます。

nextPage
((placeholder: DateValue) => DateValue)

カレンダーの次のページを返す関数。コンポーネント内で現在のプレースホルダーを引数として受け取ります。

numberOfMonths
1
number

一度に表示する月数

pagedNavigation
false
boolean

このプロパティは、前後のボタンを、1か月ではなく一度に表示される月数でナビゲートさせます

placeholder
DateValue

プレースホルダーの日付。日付が選択されていないときに表示する月を決定するために使用されます。これは、ユーザーがカレンダーをナビゲートすると更新され、カレンダービューをプログラムで制御するために使用できます

preventDeselect
false
boolean

ユーザーが最初に別の日付を選択せずに日付を選択解除するのを防ぐかどうか

prevPage
((placeholder: DateValue) => DateValue)

カレンダーの前ページを返す関数。コンポーネント内で現在のプレースホルダーを引数として受け取ります。

readonly
false
boolean

カレンダーが読み取り専用かどうか

weekdayFormat
'narrow'
'narrow' | 'short' | 'long'

weekdaysスロットプロップを介して提供される曜日文字列に使用するフォーマット

weekStartsOn
0
0 | 1 | 2 | 3 | 4 | 5 | 6

カレンダーを開始する曜日

Emitペイロード
update:modelValue
[date: DateRange]

モデルの値が変更されるたびに呼び出されるイベントハンドラー

update:placeholder
[date: DateValue]

プレースホルダーの値が変更されるたびに呼び出されるイベントハンドラー

update:startValue
[date: DateValue]

開始値が変更されるたびに呼び出されるイベントハンドラー

スロット（デフォルト）ペイロード
date
DateValue

プレースホルダーの現在の日付

grid
Grid<DateValue>[]

日付のグリッド

weekDays
string[]

曜日

weekStartsOn
0 | 1 | 2 | 3 | 4 | 5 | 6

週の開始日

locale
string

カレンダーのロケール

fixedWeeks
boolean

カレンダーに常に6週間表示するかどうか

データ属性値
[data-readonly]読み取り専用の場合に存在
[data-disabled]無効の場合に存在
[data-invalid]無効の場合に存在

ナビゲーションボタンと見出しセグメントを含みます。

Propデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

前のボタン ​

カレンダーのナビゲーションボタン。現在のカレンダービューに基づいて、1か月/年/10年過去にカレンダーを移動します。

データ属性値
[data-disabled]無効の場合に存在
Propデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

prevPage
((placeholder: DateValue) => DateValue)

前のページに使用する関数。RangeCalendarRootに設定されたprevPage関数を上書きします。

step
'month' | 'year'

進むカレンダー単位

次のボタン ​

カレンダーのナビゲーションボタン。現在のカレンダービューに基づいて、1か月/年/10年先にカレンダーを移動します。

Propデフォルト型
as
'button'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

nextPage
((placeholder: DateValue) => DateValue)

次のページに使用する関数。RangeCalendarRootに設定されたnextPage関数を上書きします。

step
'month' | 'year'

進むカレンダー単位

データ属性値
[data-disabled]無効の場合に存在

見出し ​

現在の月と年を表示するための見出し。

Propデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

スロット（デフォルト）ペイロード
headingValue
string

現在の月と年

データ属性値
[data-disabled]無効の場合に存在

グリッド ​

カレンダーグリッドをラップするためのコンテナ。

Propデフォルト型
as
'table'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

データ属性値
[data-readonly]読み取り専用の場合に存在
[data-disabled]無効の場合に存在

グリッドヘッド ​

グリッドヘッドをラップするためのコンテナ。

Propデフォルト型
as
'thead'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

グリッドボディ ​

グリッドボディをラップするためのコンテナ。

Propデフォルト型
as
'tbody'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

グリッド行 ​

グリッド行をラップするためのコンテナ。

Propデフォルト型
as
'tr'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

ヘッドセル ​

ヘッドセルをラップするためのコンテナ。曜日を表示するために使用されます。

Propデフォルト型
as
'th'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

セル ​

カレンダーセルをラップするためのコンテナ。

Propデフォルト型
as
'td'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

date*
DateValue
データ属性値
[data-disabled]無効の場合に存在

セルトリガー ​

セル日付を表示するためのインタラクティブなコンテナ。クリックすると日付が選択されます。

Propデフォルト型
as
'div'
AsTag | Component

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます

asChild
boolean

子として渡された要素のデフォルトのレンダリング要素を変更し、それらのpropsと動作をマージします。

詳細については、コンポジションガイドをお読みください。

day*
DateValue
month*
DateValue
スロット（デフォルト）ペイロード
dayValue
string

現在の日

データ属性値
[data-selected]選択されている場合に存在します
[data-value]日付のISO文字列値。
[data-disabled]無効の場合に存在
[data-unavailable]利用できない場合に存在します
[data-today]今日の場合に存在します
[data-outside-view]日付が表示されている現在の月の範囲外にある場合に存在します。
[data-outside-visible-view]日付がカレンダーに表示されている月の範囲外にある場合に存在します。
[data-selection-start]日付が選択の開始の場合に存在します。
[data-selection-end]日付が選択の終了の場合に存在します。
[data-highlighted]ユーザーが範囲を選択する際に、日付がハイライトされている場合に存在します。
[data-highlighted-start]日付がユーザーによってハイライトされている範囲の開始の場合に存在します。
[data-highlighted-end]日付がユーザーによってハイライトされている範囲の終了の場合に存在します。
[data-focused]フォーカスされている場合に存在します

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
フォーカスがカレンダーに移動すると、最初のナビゲーションボタンにフォーカスします。
Space
フォーカスがCalendarNextまたはCalendarPrevにある場合、カレンダーをナビゲートします。それ以外の場合は、日付を選択します。
Enter
フォーカスがCalendarNextまたはCalendarPrevにある場合、カレンダーをナビゲートします。それ以外の場合は、日付を選択します。
ArrowLeftArrowRightArrowUpArrowDown
フォーカスがCalendarCellTriggerにある場合、日付をナビゲートし、必要に応じて月/年/十年を変更します。