syncfusion-react-calendar

カレンダーの実装（React）

目次

• このスキルを使用するタイミング
• 概要
• クイックスタート（React）
• ガイダンスとパターン
• リファレンス
• トラブルシューティングとヒント

概要

このスキルでは、React のクイックスタート、推奨パターン（単一日付、範囲選択、制御コンポーネント）、および Syncfusion React Calendar のドキュメントをもとにした、React 専用の導入ガイドと簡潔な API リファレンスの 2 つのリファレンスファイルを提供します。

対象パッケージ：@syncfusion/ej2-react-calendars（CalendarComponent）

クイックスタート（React）

インストール

npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-base

基本的な例（App.jsx）

import React, { useState } from 'react';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-calendars/styles/material3.css';

export default function App() {
  const [value, setValue] = useState(new Date());
  const onChange = (args) => setValue(args.value || args);

  return (
    <div style={{ padding: 20 }}>
      <h3>Select a date</h3>
      <CalendarComponent value={value} change={onChange} />
      <p>Selected: {value.toDateString()}</p>
    </div>
  );
}

補足：

• change イベントを使用して、選択した日付を React の状態に同期します。
• コントロールをスタイル設定するには、テーマ CSS を 1 回（グローバルまたはコンポーネント単位で）インポートします。

ガイダンスとパターン

• 制御コンポーネント： React の状態を信頼できる値の管理元とし、change イベントを使って value を更新します。
• 複数選択： isMultiSelection={true} と values プロパティ、および addDate()／removeDate() メソッドを使用します。
• プログラムによるナビゲーション： ref を使用して navigateTo(view, date) を呼び出します。両方の引数が必要です（references/getting-started-react.md を参照）。
• 日付範囲： 範囲選択には DateRangePicker を使用します（別のコンポーネントです）。Calendar 自体には、範囲を組み込みで強調表示するモードはありません。
• アクセシビリティ： role="region" を持つラッパー要素と、通知用の独立した aria-live 領域を使用します。これらは Calendar の直接のプロパティではありません。
• 週番号： weekNumber={true} を指定して有効にします（正しいプロパティ名です）。

リファレンス

現在のタスクに合ったリファレンスを参照してください。

はじめに

📄 参照： references/getting-started-react.md

• インストールと npm のセットアップ
• React コンポーネントの例
• CSS／テーマのインポート
• ref とメソッドの使用

日付の選択

📄 参照： references/date-selection.md

• 単一の日付の選択
• 複数の日付と範囲
• 最小／最大の制約
• 特定の日付の無効化

カレンダーのビュー

📄 参照： references/calendar-views.md

• 月、年、10 年単位のビュー
• ビュー間の移動
• 初期ビューと深度の制御
• プログラムによるナビゲーション

スタイル設定とカスタマイズ

📄 参照： references/styling-customization.md

• テーマの選択と切り替え
• CSS クラスのカスタマイズ
• 日付セルのカスタム描画
• RTL とレスポンシブデザイン

イベントとメソッド

📄 参照： references/events-methods.md

• イベントハンドラー（change、created、renderDayCell）
• ref と命令型メソッドの使用
• 高度な renderDayCell フック
• イベント追跡のパターン

アクセシビリティとグローバリゼーション

📄 参照： references/accessibility-globalization.md

• WCAG 2.1 への準拠
• キーボード操作
• ARIA 属性
• ロケールのサポートと RTL
• アクセシビリティのテスト

API リファレンス（クイック参照）

📄 参照： references/api-reference.md

• プロパティ、イベント、メソッドの一覧
• よく使われる列挙型と型
• 上流ドキュメントへのリンク

トラブルシューティングとヒント

• スタイルが適用されない： CSS のインポート先が node_modules/@syncfusion/ej2-calendars/styles/ であり、コンポーネントのスタイルより先に読み込まれていることを確認してください。
• React の状態が一致しない： React の状態を同期させるには、value プロパティと change イベントを使用してください。フレームワーク固有のバインディングに依存しないでください。
• 複数の日付を選択できない： isMultiSelection={true} が設定されていることを確認し、初期配列には value ではなく values を使用してください。
• navigateTo が動作しない： このメソッドには navigateTo(view: CalendarView, date: Date) のように、2 つの引数が必要です。
• 「Cannot find module」： npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-base を実行し、package.json を確認してください。
• 週番号が表示されない： showWeekNumber ではなく、weekNumber={true} を使用してください。

---