syncfusion-javascript-scheduler

Syncfusion TypeScript Scheduler の実装

Syncfusion EJ2 TypeScript Schedule（Scheduler）コンポーネントを実装するための包括的なスキルです。複数のビュー、繰り返しイベント、リソースのグループ化、ドラッグ＆ドロップ、インライン編集、データのエクスポートに対応した、充実した機能を備えるカレンダーおよび予定管理 UI です。

このスキルを使用する場面

• TypeScript プロジェクトで Scheduler をセットアップして初期化する
• カレンダービュー（Day、Week、WorkWeek、Month、Year、Agenda、Timeline の各種ビュー）を設定する
• Scheduler にローカルまたはリモートの予定データをバインドする
• イベントの CRUD（作成、読み取り、更新、削除）を実装する
• 繰り返しイベントと RecurrenceEditor を扱う
• 複数のリソースとグループ化されたビューを設定する
• イベントエディターのポップアップやクイック情報テンプレートをカスタマイズする
• Scheduler のデータを Excel、CSV、iCalendar（.ics）にエクスポートする
• グローバルなユーザーベース向けにタイムゾーンを扱う
• スタイル設定、テーマ設定、アクセシビリティ要件への準拠を行う

---

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

はじめにとモジュールのインジェクション

📄 参照: references/getting-started.md

• パッケージの依存関係と npm のインストール
• CSS のインポートとテーマの設定
• Schedule.Inject() によるモジュールのインジェクション
• Scheduler の初期化と DOM への追加
• eventSettings.dataSource による予定の設定
• selectedDate と currentView の設定
• views 配列によるビューごとの個別設定

ビューの設定

📄 参照: references/views.md

• 12 種類すべてのビュータイプと必要なモジュール
• ビューごとのオプション（startHour、endHour、timeScale、showWeekend など）
• interval と displayName を使用した拡張ビュー
• Timeline ビューの向きと Agenda ビューのオプション

予定と繰り返しイベント

📄 参照: references/appointments.md

• 通常、複数日にわたる、終日、繰り返しのイベントタイプ
• iCal RecurrenceRule 文字列の構文（FREQ、BYDAY、COUNT、UNTIL など）
• 繰り返しの例外と、個々の発生または以降の発生の編集
• 組み込みイベントフィールドの参照表
• eventSettings.fields によるカスタムフィールドのマッピング
• allowOverlap による重複の防止と、sortComparer によるカスタム順序設定

データバインディング

📄 参照: references/data-binding.md

• eventSettings.dataSource によるローカル JSON 配列のバインド
• DataManager と ODataV4Adaptor によるリモートバインディング
• ej2-base Ajax を使用した AJAX 読み込みパターン
• includeFiltersInQuery によるサーバー側の日付範囲フィルタリング
• eventSettings.query によるクエリパラメーターの受け渡し
• dataBinding イベントによる Google Calendar API との統合

CRUD 操作

📄 参照: references/crud-actions.md

• エディター、クイックポップアップ、または addEvent() メソッドによるイベントの作成
• saveEvent() と deleteEvent() による更新および削除
• UrlAdaptor と crudUrl によるサーバー側の CRUD
• validation プロパティ（必須、正規表現）によるフィールド検証
• actionBegin／actionComplete ライフサイクルイベント
• 読み取り専用モードの有効化

エディターテンプレートとクイック情報

📄 参照: references/editor-template.md

• popupOpen によるデフォルトのエディターフィールドのカスタマイズ
• editorTemplate によるエディター全体の置き換え
• editorHeaderTemplate と editorFooterTemplate
• quickInfoTemplates によるカスタムクイック情報ポップアップ
• showQuickInfo の切り替えと closeEditor() メソッド
• timezoneDataSource によるカスタムタイムゾーンドロップダウン

リソースとグループ化

📄 参照: references/resources.md

• resources プロパティとフィールドマッピングによるリソースの定義
• group.resources による単一レベルおよび複数レベルのグループ化
• group.byDate による日付ベースのグループ化
• allowMultiple によるイベントへの複数リソースの割り当て
• リソースごとの稼働時間、色、CSS クラス
• Timeline ビューでの展開可能なリソース行

稼働日、稼働時間、タイムスケール

📄 参照： references/working-days-timescale.md

• workDays、showWeekend、showWeekNumber、firstDayOfWeek
• workHours のハイライト、開始、終了の設定
• 表示する時間範囲を設定する startHour / endHour
• interval と slotCount を指定する timeScale
• メジャー／マイナーのスロットテンプレート
• プログラムから時間をスクロールする scrollTo()

セル、ヘッダー、ビューのカスタマイズ

📄 参照： references/cell-header-customization.md

• elementType 条件を指定する cellTemplate
• 対象のセルを変更する renderCell イベント
• Month ビューの日付ヘッダー用 cellHeaderTemplate
• ヘッダーバー：showHeaderBar、toolbarItems、dateHeaderTemplate
• Year／Month／Week／Date／Hour 行を指定する Timeline の headerRows プロパティ
• 日付範囲を制限する minDate / maxDate

エクスポートと印刷

📄 参照： references/exporting.md

• ExportOptions（fileName、fields、customData など）を指定する exportToExcel()
• exportType: 'csv' による CSV エクスポート
• エクスポート前にカスタマイズする excelExport イベント
• .ics 形式にエクスポートする exportToICalendar()
• ファイルの Blob からインポートする importICalendar()
• beforePrint イベントを備えた print() メソッド

タイムゾーンの処理

📄 参照： references/timezone.md

• timezone プロパティ（IANA タイムゾーン文字列）
• イベントごとの StartTimezone / EndTimezone フィールド
• offset()、convert()、add()、remove() を備えた Timezone ユーティリティクラス
• timezoneData によるタイムゾーンドロップダウンのカスタマイズ
• グローバル／複数地域のチーム向け UTC モード

繰り返しエディター

📄 参照： references/recurrence-editor.md

• 単独で使用する RecurrenceEditor コンポーネントのセットアップ
• frequencies および endTypes プロパティの設定
• 生成されたルール文字列を取得する change イベント
• setRecurrenceRule() および getRecurrenceDates() メソッド

スタイル設定とテーマ

📄 参照： references/scheduler-styling.md

• Scheduler の全要素に対応する CSS クラスセレクターの一覧
• ビューにスコープを限定したセレクター（.e-vertical-view、.e-month-view など）
• 選択されたセルや予定の状態クラス
• Timeline ビューのリソース行セレクター
• ブロックされた予定と読み取り専用の予定のスタイル

高度な機能

📄 参照： references/advanced-features.md

• ContextMenu を使用したコンテキストメニューの統合
• クリップボード：allowClipboard、cut()、copy()、paste()、beforePaste イベント
• allowVirtualScrolling と enableLazyLoading による仮想スクロール
• Timeline ビューと Month ビュー向けの rowAutoHeight
• enablePersistence による状態の永続化
• calendarMode: 'Islamic' によるイスラム暦／ヒジュラ暦
• Scheduler のサイズ：height と width
• アクセシビリティ、WCAG 2.2、キーボードショートカット

---

クイックスタート

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

// Inject required view modules
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    currentView: 'Week',
    eventSettings: {
        dataSource: [
            {
                Id: 1,
                Subject: 'Team Meeting',
                StartTime: new Date(2018, 1, 15, 10, 0),
                EndTime: new Date(2018, 1, 15, 12, 0)
            }
        ]
    }
});
scheduleObj.appendTo('#Schedule');

/* In styles.css */
@import '../../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-calendars/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-schedule/styles/fluent2.css';

---

よくあるパターン

パターン 1：週末を非表示にして Month ビューに切り替える

import { Schedule, Month } from '@syncfusion/ej2-schedule';

Schedule.Inject(Month);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    currentView: 'Month',
    showWeekend: false,
    eventSettings: { dataSource: [...] }
});
scheduleObj.appendTo('#Schedule');

パターン 2：フィールド名をカスタマイズする

let scheduleObj: Schedule = new Schedule({
    height: '550px',
    eventSettings: {
        dataSource: myData,
        fields: {
            id: 'EventId',
            subject: { name: 'Title' },
            startTime: { name: 'From' },
            endTime: { name: 'To' },
            isAllDay: { name: 'AllDay' }
        }
    }
});
scheduleObj.appendTo('#Schedule');

パターン 3：プログラムから予定を作成する

let eventData: Object = {
    Id: 10,
    Subject: 'New Event',
    StartTime: new Date(2018, 1, 15, 14, 0),
    EndTime: new Date(2018, 1, 15, 16, 0)
};
scheduleObj.addEvent(eventData);

パターン 4：リソース別にグループ化した Timeline

import { Schedule, TimelineViews } from '@syncfusion/ej2-schedule';

Schedule.Inject(TimelineViews);
let scheduleObj: Schedule = new Schedule({
    height: '550px',
    currentView: 'TimelineWeek',
    group: { resources: ['Rooms'] },
    resources: [{
        field: 'RoomId',
        title: 'Room',
        name: 'Rooms',
        dataSource: [
            { RoomText: 'Room 1', Id: 1, RoomColor: '#cb6bb2' },
            { RoomText: 'Room 2', Id: 2, RoomColor: '#56ca85' }
        ],
        textField: 'RoomText',
        idField: 'Id',
        colorField: 'RoomColor'
    }],
    eventSettings: { dataSource: [...] }
});
scheduleObj.appendTo('#Schedule');

---

主要プロパティのリファレンス

プロパティ	型	説明
height	string	スケジューラーの高さ（'550px'、'100%'、'auto'）
width	string	スケジューラーの幅
selectedDate	Date	現在表示されている日付
currentView	string	アクティブなビュー名
views	ViewsModel[]	ビューごとの設定配列
eventSettings	EventSettingsModel	データソースとフィールドのマッピング
group	GroupModel	リソースのグループ化設定
resources	ResourcesModel[]	リソースの定義
workDays	number[]	表示する曜日（0＝日～6＝土）
workHours	WorkHoursModel	勤務時間の強調表示と範囲
showWeekend	boolean	土曜日と日曜日の表示／非表示
timezone	string	表示に使用するIANAタイムゾーン文字列
enablePersistence	boolean	localStorageに状態を永続化
readonly	boolean	すべてのCRUD操作を無効化
allowClipboard	boolean	イベントの切り取り／コピー／貼り付けを有効化