syncfusion-vue-scheduler

Syncfusion Vue Scheduler

Vue アプリケーション向けの包括的なスケジューリングコンポーネントです。カレンダービュー、予定の管理、リソースのスケジューリング、時間ベースのイベント表示に対応し、ドラッグ＆ドロップもサポートします。

このスキルを使用するタイミング

次のような場合に、このスキルを使用してください。

• Vue アプリケーションにカレンダー機能やスケジューリング機能を実装する
• 予定の予約システムやイベント管理システムを作成する
• リソース割り当てツールや会議スケジューラーツールを構築する
• 日、週、月、タイムライン、アジェンダの各ビューでイベントを表示する
• 複雑な繰り返しパターンの定期イベントを処理する
• グループ化されたスケジューリングで複数のリソースを管理する
• ドラッグ＆ドロップによるイベントスケジューリングを実装する
• CRUD 操作に対応したインタラクティブなカレンダーを作成する
• スケジューリングアプリケーションで複数のタイムゾーンをサポートする
• カレンダーデータをエクスポート／インポートする（ICS 形式）

コンポーネントの概要

Syncfusion Vue Scheduler は、次の機能をサポートする、機能豊富なカレンダーおよびスケジューリングコンポーネントです。

• 複数のビュー：日、週、稼働日、月、年、アジェンダ、タイムラインの各ビュー
• イベント管理：通常のイベント、終日イベント、複数日にわたるイベント、例外を含む定期イベント
• リソーススケジューリング：カスタムテンプレートによる単一および複数リソースのグループ化
• ドラッグ＆ドロップ：時間枠やリソース間でのイベントの移動とサイズ変更
• データバインディング：フィールドマッピングに対応したローカルおよびリモートのデータソース
• カスタマイズ：セルテンプレート、イベントテンプレート、包括的なスタイル設定オプション
• インタラクション：コンテキストメニュー、クリップボード操作、キーボードショートカット
• アクセシビリティ：キーボードナビゲーションとスクリーンリーダーに対応した WCAG 準拠

ドキュメントとナビゲーションガイド

Syncfusion Vue Scheduler を包括的に解説する、スケジューラー実装のあらゆる側面を網羅した 17 個のリファレンスファイルです。

はじめに

📄 読む： references/getting-started.md

• @syncfusion/ej2-vue-schedule とテーマパッケージのインストール
• Syncfusion テーマパッケージを使用した CSS の参照
• Vue 2／3 向けのモジュール注入と provide の設定
• selectedDate と currentView を使用した基本的なスケジューラーの初期化
• eventSettings を使用した最初の予定の作成
• 必要なすべてのコンポーネントの CSS インポートパス

予定とイベント

📄 読む： references/appointments.md

• イベントの種類：通常の予定、終日の予定、複数日にわたる予定、定期的な予定
• イベントフィールドとカスタムフィールドマッピング
• 繰り返しルールとパターン（FREQ、INTERVAL、COUNT、UNTIL、BYDAY など）
• 繰り返しの例外と、個別の発生分またはシリーズ全体の編集
• dragStart、drag、dragStop イベントによるドラッグ＆ドロップ
• サイズ変更コントロールによるイベントのサイズ変更
• インラインでの予定編集
• イベント取得メソッド（getEventDetails、getCurrentViewEvents、getEvents）

予定の動作と検証

📄 読む： references/appointment-behavior-and-validation.md

• 予定の最小の高さの設定
• 日付と時刻のブロック
• 読み取り専用イベントとイベント作成の制限
• 過去のイベントの識別と過去の日付の無効化
• セル全体を占める予定と、表示するイベント数の制限
• ツールチップとフィルタリング操作
• 予定の選択と Delete キーによる複数予定の削除
• 重複の防止と繰り返しルールの検証

ビューとナビゲーション（表示モード）

📄 参照： references/views.md

• 日、週、稼働週、月、年、予定リスト、月間予定リストの各ビュー
• タイムラインビュー（TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear）
• ビュー固有の設定（startHour、endHour、workDays、interval、dateFormat）
• 複数日、複数週、複数月のビュー間隔
• ビューテンプレート（cellTemplate、dateHeaderTemplate、eventTemplate、resourceHeaderTemplate）
• タイムラインビュー用のカスタムヘッダー行
• 週の開始曜日の設定
• すべてのビューでの週末の非表示に対応
• 読み取り専用のビューモード
• 予定リストビューとタイムラインビューでの仮想スクロール
• 週番号の表示
• 予定リストの日数とhideEmptyAgendaDays
• maxEventStackを使ったイベントの重なりの制限

データバインディング（ローカルとリモート）

📄 参照： references/data-binding.md

• オブジェクト配列を使ったローカルデータソース
• DataManager（ODataV4Adaptor、WebApiAdaptor、UrlAdaptor）を使ったリモートデータバインディング
• カスタムフィールドマッピング（id、subject、startTime、endTime、location、description、isAllDay、recurrenceRule、isReadonly）
• includeFiltersInQueryを使ったサーバーサイドフィルタリング
• processResponseを使ってODataV4Adaptorを拡張するカスタムアダプター
• コールバックを使ったAJAX Postによるデータの読み込み
• Query.addParamsを使ったサーバーへの追加パラメーターの渡し方
• actionFailureイベントを使った失敗アクションの処理
• UrlAdaptorとサーバーサイドコントローラーコードによるCRUD操作
• EditParamsを使ったC#コントローラーの実装（Insert／Update／Removeロジック）
• WebApiAdaptorとdataBinding変換によるGoogle Calendar連携
• crossDomainに対応したDataManagerの設定

リソースとグループ化

📄 参照： references/resources.md

• リソースのフィールドとプロパティ（field、title、name、allowMultiple、dataSource、idField、textField、colorFieldなど）
• リソースのデータバインディング（ローカルJSONとリモートDataManager）
• 単一および複数のリソース割り当て
• 単一階層および複数階層の階層的なリソースグループ化
• 日付によるリソースのグループ化（byDateプロパティ）
• 1対1のリソースグループ化（byGroupID: false）
• allowGroupEditを使ったリソース間でのイベント共有
• 垂直リソースビューとタイムラインリソースビューの実装

リソースのカスタマイズ

📄 参照： references/resource-customization.md

• リソースごとのカスタム稼働時間
• リソースごとのカスタム稼働日
• カスタマイズ可能なリソースヘッダーテンプレート
• 複数列のリソースヘッダー（タイムラインのみ）
• renderCellイベントを使った親リソースセルのカスタマイズ
• リソースごとのカスタムCSSクラス
• リソースの展開／折りたたみ状態（タイムラインビュー）

時刻の設定（タイムスケールとタイムゾーン）

📄 参照： references/timescale-timezone.md

• タイムスケールの設定（enable、interval、slotCount、テンプレート）
• スロットの長さの設定（30分、15分、10分、5分間隔）
• タイムスケールの非表示とカスタム時刻形式
• メジャースロットとマイナースロットのテンプレート
• IANAタイムゾーン名を使ったスケジューラーのタイムゾーン設定
• 一般的なタイムゾーン（America/New_York、Europe/London、Asia/Tokyoなど）
• グローバルアプリケーションでのUTC表示
• startTimezoneフィールドとendTimezoneフィールドを使ったイベントごとのタイムゾーン
• タイムゾーン変換用ヘルパーメソッド（convert、removeLocalOffset、addLocalOffset）
• イベントエディターのタイムゾーンのドロップダウン
• ブラウザーのローカルタイムゾーン（タイムゾーン設定なし）
• 夏時間の処理

カスタマイズ

📄 参照： references/customization.md

• CSS クラスによるセルのサイズ設定（すべてのビューでの高さと幅）
• workCells、monthCells、allDayCells、dateHeader セルのセルテンプレート
• elementType のチェックによる RenderCell イベント（workCells、monthCells、dateHeader、resourceGroupCells など）
• Month ビューのセルヘッダーテンプレート
• Week／Day ビューの日付ヘッダーのカスタマイズ
• 日付の最小値と最大値の制約
• 週末セルのカスタマイズとハイライト表示
• カスタムの勤務時間と勤務日
• 複数セルおよび複数行の選択制御
• isSlotAvailable メソッドによるスロットの利用可能状況の確認

エディターテンプレート

📄 参照： references/editor-template.md

• イベントエディターの概要とモード（Add、Edit、EditOccurrence、EditSeries）
• title プロパティによるエディターフィールドラベルのカスタマイズ
• ローカライズ（L10n）によるエディターボタンのカスタマイズ
• フィールドの検証ルール（必須、正規表現、カスタムバリデーター）
• デフォルトのエディターへのカスタムフィールドの追加
• 完全にカスタムのエディターテンプレートの作成
• クイック情報テンプレートのカスタマイズ（ヘッダー、コンテンツ、フッター）
• readonly または popupOpen イベントによるエディターの無効化
• エディターフィールドの種類と検証

ヘッダーの設定

📄 参照： references/header-configuration.md

• ヘッダーバーのカスタマイズとスタイル設定
• タイムラインビューのヘッダー行（Year、Month、Date）
• すべてのビューの日付ヘッダーテンプレート
• カスタムツールバー操作とボタン
• ヘッダーのナビゲーション（前へ、今日、次へ）
• ヘッダー要素の表示／非表示

CRUD 操作

📄 参照： references/crud-operations.md

• イベントの追加：addEvent メソッド、複数イベントの一括追加
• イベントの編集：アクションの種類を指定する saveEvent メソッド
• イベントの削除：ID またはオブジェクトを指定する deleteEvent、複数削除
• allowDragAndDrop モジュールによるドラッグ＆ドロップ
• allowResizing モジュールによるイベントのサイズ変更
• 検証とキャンセルのための ActionBegin イベント
• 操作後の処理のための ActionComplete イベント
• エラー処理のための ActionFailure イベント
• 読み取り専用モードとイベントごとの readonly フラグ
• 時間範囲とスロットの利用可能状況の検証
• isSlotAvailable による重複の防止

クリップボード操作

📄 参照： references/clipboard.md

• allowClipboard プロパティによるクリップボードの有効化
• コピー／切り取り／貼り付けのキーボードショートカット（Ctrl+C、Ctrl+X、Ctrl+V）
• プログラム用 API（copy()、cut()、paste() メソッド）
• カスタムメニュー項目によるコンテキストメニューとの連携
• データ変更のための貼り付け前／後のイベント
• 動作に関する注意事項（コピーでは複製が作成され、切り取りではイベントが移動します）
• コピーしたイベントの複数回貼り付け
• アプリケーション間の貼り付けをサポート

コンテキストメニュー

📄 参照： references/context-menu.md

• ContextMenu コンポーネントによるカスタムコンテキストメニューの連携
• items 設定によるメニューのセットアップ
• メニューの表示ロジックのための BeforeOpen イベント
• メニュー操作の処理のための OnSelect イベント
• コンテキスト（セルまたはイベント）に応じたメニュー項目の表示／非表示
• サブ項目を含む定期イベントメニュー（Occurrence／Series の編集・削除）
• カスタムメニュー項目（印刷、エクスポート、メールなど）
• タップ＆ホールドに対応したモバイル向けコンテキストメニュー
• CSS クラスによるカスタムスタイル設定

ローカライズとアクセシビリティ

📄 参照： references/localization-accessibility.md

• ロケールの設定と言語翻訳（en、fr、de、ja など）
• カスタムテキスト翻訳のための L10n クラス
• dateFormat と timeFormat による日付と時刻の書式設定（12／24 時間制、ISO、ロケール対応）
• アラビア語とヘブライ語の RTL（右から左）サポート
• WCAG 2.0 適合レベル AA
• キーボードショートカット（Tab、Enter、Space、Delete、Ctrl+A など）
• ARIA 属性（role、aria-label、aria-describedby）
• スクリーンリーダーのサポートと読み上げ通知
• フォーカス管理と視認可能なフォーカスインジケーター

高度な機能

📄 参照： references/advanced-features.md

• Agenda／Timeline ビューでの大規模データセット向け仮想スクロール
• PDF および Excel 形式へのエクスポート
• カスタムテンプレートを使ったスケジューラーの印刷
• ビュー／日付／スクロール位置を保存する状態の永続化（enablePersistence）
• 重なり合うイベントに対応する行の自動高さ調整
• カスタムレンダリング用のイベントテンプレート
• クイック情報テンプレート
• 時間枠のブロック（利用不可の時間の設定）
• ICS カレンダーのインポート／エクスポート
• イベントにカーソルを合わせたときのツールチップ
• インライン編集のサポート
• レスポンシブな適応型 UI

繰り返しエディターとカレンダーモード

📄 参照： references/recurrence-editor-calendar-modes.md

• 繰り返しエディターと繰り返し日付の生成
• グレゴリオ暦およびイスラム暦モード
• 稼働日、稼働時間、カスタム時間範囲
• スケジューラーのスタイル設定とテーマ
• パフォーマンス最適化のヒント
• 本番環境での使用に関するベストプラクティス

クイックスタートの例

予定を含む基本的なスケジューラー

<template>
  <div id='app'>
    <ejs-schedule 
      height='550px' 
      :selectedDate='selectedDate'
      :eventSettings='eventSettings'>
    </ejs-schedule>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

const selectedDate = new Date(2024, 0, 15);
const eventSettings = {
  dataSource: [
    {
      Id: 1,
      Subject: 'Team Meeting',
      StartTime: new Date(2024, 0, 15, 10, 0),
      EndTime: new Date(2024, 0, 15, 11, 30),
      IsAllDay: false
    },
    {
      Id: 2,
      Subject: 'Project Review',
      StartTime: new Date(2024, 0, 16, 14, 0),
      EndTime: new Date(2024, 0, 16, 15, 30),
      IsAllDay: false
    }
  ]
};

// Inject required view modules
provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/schedule/index.css";
</style>

よく使われるパターン

例外を含む繰り返しイベント

<script setup>
const eventSettings = {
  dataSource: [
    {
      Id: 1,
      Subject: 'Daily Standup',
      StartTime: new Date(2024, 0, 15, 9, 0),
      EndTime: new Date(2024, 0, 15, 9, 30),
      RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=10',
      RecurrenceException: '20240117T090000Z,20240119T090000Z'
    }
  ]
};
</script>

リソースのグループ化

<template>
  <ejs-schedule 
    :eventSettings='eventSettings'
    :group='group'>
    <e-resources>
      <e-resource 
        field='RoomId' 
        title='Room' 
        name='Rooms'
        :dataSource='roomData'
        textField='Name' 
        idField='Id' 
        colorField='Color'>
      </e-resource>
    </e-resources>
  </ejs-schedule>
</template>

<script setup>
const roomData = [
  { Id: 1, Name: 'Room A', Color: '#ffaa00' },
  { Id: 2, Name: 'Room B', Color: '#357cd2' }
];

const group = { resources: ['Rooms'] };
</script>

カスタムフィールドのマッピング

<script setup>
const eventSettings = {
  dataSource: appointmentData,
  fields: {
    id: 'EventId',
    subject: { name: 'Title' },
    startTime: { name: 'From' },
    endTime: { name: 'To' },
    location: { name: 'Place' },
    description: { name: 'Notes' },
    isAllDay: { name: 'FullDay' }
  }
};
</script>

Timeline ビューの設定

<template>
  <ejs-schedule 
    :selectedDate='selectedDate'
    :eventSettings='eventSettings'>
    <e-views>
      <e-view option='TimelineDay'></e-view>
      <e-view option='TimelineWeek'></e-view>
      <e-view option='TimelineMonth'></e-view>
    </e-views>
  </ejs-schedule>
</template>

<script setup>
import { provide } from "vue";
import { TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';

provide('schedule', [TimelineViews, TimelineMonth]);
</script>

主なプロパティとイベント

主なプロパティ

プロパティ	型	説明
selectedDate	Date	スケジューラーで現在選択されている日付
currentView	string	アクティブなビュー（Day、Week、Month、Agenda など）
eventSettings	object	イベントのデータソースとフィールドの設定
views	array	表示するビューの一覧
startHour	string	日／週ビューの開始時刻（例：'08:00'）
endHour	string	日／週ビューの終了時刻（例：'18:00'）
workDays	number[]	稼働日（0=日曜日、1=月曜日など）
timeScale	object	時間枠の設定（interval、slotCount）
group	object	リソースのグループ化設定
readonly	boolean	true の場合、CRUD 操作を禁止します
allowDragAndDrop	boolean	イベントのドラッグ＆ドロップを有効にします
allowResizing	boolean	イベントのサイズ変更を有効にします
allowMultiDrag	boolean	複数イベントのドラッグ選択を有効にします
allowClipboard	boolean	クリップボード操作を有効にします
timezone	string	スケジューラーのタイムゾーン（例：'America/New_York'）

主なイベント

イベント	説明
actionBegin	CRUD 操作（追加／編集／削除）の前に発生します
actionComplete	CRUD 操作が正常に完了した後に発生します
actionFailure	CRUD 操作が失敗したときに発生します
eventClick	イベントがクリックされたときに発生します
eventDoubleClick	イベントがダブルクリックされたときに発生します
cellClick	セルがクリックされたときに発生します
cellDoubleClick	セルがダブルクリックされたときに発生します
popupOpen	エディター／クイック情報ポップアップが開く前に発生します
popupClose	ポップアップが閉じたときに発生します
dragStart	イベントのドラッグが開始されたときに発生します
drag	イベントのドラッグ中に発生します
dragStop	イベントのドラッグが終了したときに発生します
resizeStart	イベントのサイズ変更が開始されたときに発生します
resizing	イベントのサイズ変更中に発生します
resizeStop	イベントのサイズ変更が終了したときに発生します
dataBinding	データバインディングの前に発生します
dataBound	データバインディングが完了した後に発生します
beforePaste	クリップボードからの貼り付け操作の前に発生します

基本的なメソッド

メソッド	説明
addEvent(data)	スケジューラーに新しいイベントを追加します
saveEvent(data, action)	変更したイベントを保存します
deleteEvent(id/object)	ID またはオブジェクトを指定してイベントを削除します
getEvents(startDate, endDate)	指定した日付範囲内のイベントを取得します
getEventDetails(element)	要素からイベントの詳細を取得します
openEditor(data, action)	エディターウィンドウをプログラムから開きます
closeEditor()	エディターウィンドウを閉じます
refreshEvents()	すべてのイベントを更新します
scrollTo(hour)	日表示または週表示で指定した時刻までスクロールします
getCurrentViewDates()	現在のビューの日付コレクションを返します

インストール

Syncfusion Vue Schedule パッケージをインストールします。

npm install @syncfusion/ej2-vue-schedule --save

必要な CSS テーマをインポートします。

import '@syncfusion/ej2-base/styles/material3.css';
import '@syncfusion/ej2-buttons/styles/material3.css';
import '@syncfusion/ej2-calendars/styles/material3.css';
import '@syncfusion/ej2-dropdowns/styles/material3.css';
import '@syncfusion/ej2-inputs/styles/material3.css';
import '@syncfusion/ej2-navigations/styles/material3.css';
import '@syncfusion/ej2-popups/styles/material3.css';
import '@syncfusion/ej2-vue-schedule/styles/material3.css';

モジュールの注入

Scheduler ではビュー モジュールを注入する必要があります。必要なビューのみを注入してください。

import { 
  Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda,
  TimelineViews, TimelineMonth, TimelineYear,
  DragAndDrop, Resize
} from '@syncfusion/ej2-vue-schedule';

provide('schedule', [Day, Week, Month, Agenda, DragAndDrop]);

関連コンポーネント

• Recurrence Editor：繰り返しルールを作成するためのスタンドアロンコンポーネント
• DatePicker/DateRangePicker：カスタムエディターでの日付選択に使用します
• TimePicker：カスタムエディターでの時刻選択に使用します
• DropDownList：カスタムエディターでのリソース選択に使用します

ベストプラクティス

1. モジュールの注入：バンドルサイズを小さくするため、実際に使用するビュー モジュールのみを注入します
2. フィールドマッピング：データ構造がデフォルトと異なる場合は、カスタムフィールドマッピングを使用します
3. パフォーマンス：大規模なデータセットでは仮想スクロールを有効にします（タイムラインビュー）
4. タイムゾーン：複数のタイムゾーンを扱う場合は、スケジューラーのタイムゾーンを明示的に設定します
5. イベント ID：CRUD 操作を適切に行うため、イベントには必ず一意の ID を設定します
6. 検証：保存前にデータを検証するには、actionBegin イベントを使用します
7. テンプレート：イベントのカスタムレンダリングやセルのカスタマイズには、テンプレートを使用します
8. アクセシビリティ：キーボードナビゲーションを有効にし、適切な ARIA ラベルを指定します
9. レスポンシブ対応：CSS メディアクエリーを使用して、モバイルデバイス向けにスケジューラーを調整します
10. 状態管理：状態の永続化を使用して、ユーザー設定を保存します

トラブルシューティング

イベントが表示されない：イベントのフィールドがスケジューラーで想定されるフィールド名と一致していることを確認するか、eventSettings でフィールドマッピングを使用してください。

ビューが読み込まれない：provide メソッドを使って、必要なビュー モジュールが正しく注入されていることを確認してください。

ドラッグ＆ドロップが機能しない：DragAndDrop モジュールをインポートして注入してください。

タイムゾーンの問題：スケジューラーの timezone プロパティを設定し、イベント時刻が正しい形式であることを確認してください。

カスタムフィールドが保存されない：eventSettings.fields の設定でカスタムフィールドをマッピングしてください。

パフォーマンスの問題：イベントやリソースが多いタイムラインビューでは、仮想スクロールを有効にしてください。

サーバーからデータが読み込まれない：CORS 設定、DataManager アダプターの設定、ブラウザーの DevTools でのネットワークリクエストを確認してください。

繰り返しイベントの発生回が生成されない：RecurrenceRule の構文（FREQ、INTERVAL、COUNT、UNTIL パラメーター）を確認し、ルールが有効であることを確認してください。