syncfusion-angular-scheduler

Syncfusion Angular Scheduler の実装

複数の表示モード、リソースのグループ化、タイムゾーン対応、豊富なカスタマイズオプションを備えた、イベントや予定の管理向け Syncfusion Angular Scheduler コンポーネントの実装に関する包括的なガイドです。

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

次のような場合にこのスキルを使用します。

• イベントと予定の管理：イベントのスケジュール設定、編集、管理ができるカレンダーアプリケーションを作成する
• リソースのスケジュール管理：グループ化やフィルタリングを使用して、複数のリソース（会議室、機器、人員）を管理する
• タイムライン表示：プロジェクト計画やリソース割り当てのために、イベントを横向きのタイムライン形式で表示する
• 予約システム：医療機関、美容室、会議室の管理向けの予約インターフェースを構築する
• カレンダーアプリケーション：繰り返しイベントやリマインダーを備えた、機能が充実したカレンダーシステムを実装する
• 複数のタイムゾーンへの対応：グローバルチーム向けに、異なるタイムゾーンにまたがるイベントを扱う
• 勤務時間の管理：業務アプリケーション向けに、勤務日、勤務時間、休日を設定する

コンポーネントの概要

Syncfusion Angular Scheduler（ejs-schedule）は、次の機能を備えた、豊富な機能を持つカレンダーおよびイベント管理コンポーネントです。

• 11 種類以上の表示モード：Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda、各種 Timeline 表示
• イベントの種類：複雑な繰り返しパターンに対応した、通常、複数日にまたがる、終日、繰り返しイベント
• データバインディング：CRUD 操作と DataManager 統合に対応した、ローカルおよびリモートのデータ
• リソース管理：カスタムテンプレートを使用した、単一および複数リソースのグループ化
• 時間の設定：カスタマイズ可能な時間目盛り、タイムゾーン対応、勤務時間・勤務日の設定
• 柔軟なカスタマイズ：セルテンプレート、エディターテンプレート、イベントテンプレート、カスタムスタイル
• 高度な機能：ドラッグ＆ドロップ、サイズ変更、クリップボード操作、仮想スクロール、エクスポート（ICS/Excel/PDF）
• アクセシビリティ：キーボード操作とスクリーンリーダーに対応した WCAG 2.1 準拠
• ローカライズ：多言語および RTL に対応

パッケージ：@syncfusion/ej2-angular-schedule

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

はじめに

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

次のような場合は、このリファレンスを参照してください。

• Angular Scheduler パッケージをインストールしてセットアップする
• モジュール登録とビューサービス（Day、Week、Month、Agenda、Timeline）を設定する
• 基本設定で最初のスケジューラーを作成する
• npm のテーマパッケージを使って、テーマパッケージをインストールし CSS をインポートする
• コンポーネントの初期化について理解する

ビューと表示の設定

📄 参照先： references/views-and-display.md

次のような場合は、このリファレンスを参照してください。

• 使用可能な表示モード（Day、Week、WorkWeek、Month、Year、Agenda）を設定する
• Timeline ビュー（TimelineDay、TimelineWeek、TimelineMonth、TimelineYear）を設定する
• プログラムからビューを切り替える
• ビュー固有の設定や間隔をカスタマイズする
• ビュー固有の表示オプションを設定する

カレンダーモードとイベント表示

📄 参照先： references/views-display-advanced.md

次のような場合は、このリファレンスを参照してください。

• グレゴリオ暦またはイスラム暦のモードを設定する
• maxEventStack を使用してイベントの重複表示を制限する
• ビュー設定のベストプラクティスとよくある問題を確認する

イベントと予定

📄 参照先： references/appointments.md

次のような場合は、このリファレンスを参照してください。

• イベントの種類（通常、複数日にまたがる、終日、繰り返し）について理解する
• イベントのデータ構造と必須フィールドを定義する
• プログラムからイベントを作成して描画する
• イベントの操作（クリック、ダブルクリック、ホバー）を処理する
• イベントにカスタムフィールドを追加する

イベントテンプレートとツールチップ

📄 参照： references/appointment-templates.md

次の作業を行う場合は、このリファレンスを参照してください。

• イベントテンプレートとカスタムレンダリングを設定する
• リッチなホバーコンテンツ用のイベントツールチップテンプレートを設定する
• 予定に関するベストプラクティスと一般的な問題を確認する

データバインディングと CRUD 操作

📄 参照： references/data-binding.md

次の作業を行う場合は、このリファレンスを参照してください。

• ローカルデータ（配列）をスケジューラーにバインドする
• リモートデータソース（OData、Web API、REST サービス）に接続する
• 高度なデータ操作に DataManager を使用する
• カスタムデータ構造に合わせてフィールドマッピングを設定する
• CRUD 操作（作成、読み取り、更新、削除）を実装する
• データアダプターとカスタムクエリを処理する

リソースとグループ化

📄 参照： references/resources.md

次の作業を行う場合は、このリファレンスを参照してください。

• 単一または複数のリソース（会議室、従業員、設備）を設定する
• リソースのグループ化（日付別またはリソース別）を設定する
• リソースの色とスタイルをカスタマイズする
• リソーステンプレートを作成する
• リソースの表示状態をフィルタリングおよび管理する
• リソースベースのイベントを処理する

高度なリソース管理

📄 参照： references/resources-advanced.md

次の作業を行う場合は、このリファレンスを参照してください。

• リソースを動的に追加または削除する
• リソースごとの勤務時間と勤務日を設定する
• タイムラインのリソース展開、色、レスポンシブ動作を管理する
• リソース管理のベストプラクティスと一般的なシナリオを確認する

時刻の設定

📄 参照： references/time-configuration.md

次の作業を行う場合は、このリファレンスを参照してください。

• 時間軸の間隔とタイムスロットを設定する
• 日表示の開始時刻と終了時刻を設定する
• 勤務日と勤務時間を定義する
• タイムゾーンのサポートと変換を処理する
• 複数のタイムゾーンを管理する
• 時刻形式と表示をカスタマイズする

時刻のナビゲーションとガイダンス

📄 参照： references/time-configuration-navigation.md

次の作業を行う場合は、このリファレンスを参照してください。

• 特定の時刻または現在の時刻までスクロールする
• 時刻設定のベストプラクティスと一般的なシナリオを確認する

現在時刻インジケーターのカスタマイズ

📄 参照： references/custom-current-time-indicator.md

次の作業を行う場合は、このリファレンスを参照してください。

• showTimeIndicator で現在時刻インジケーターの表示を切り替える
• インジケーターの線の横に表示される時刻ラベルの表示を切り替える
• currentTimeIndicatorSettings.showPreviousDates でインジケーターを過去の日付列まで延長する
• currentTimeIndicatorSettings.onTop でインジケーターを予定セルの前面に表示する
• チェックボックスで実行時にインジケーターの設定を変更するインタラクティブなデモを作成する
• ユーザーが4つのオプションのいずれかを変更した後にインジケーターを再描画する

エディターのカスタマイズ

📄 参照： references/editor-customization.md

次の作業を行う場合は、このリファレンスを参照してください。

• イベントエディターのダイアログをカスタマイズする
• カスタムエディターテンプレートを作成する
• エディターにカスタムフィールドを追加する
• エディターの検証ルールを設定する
• クイック情報ポップアップをカスタマイズする
• エディターイベントを処理する

クイック情報とオーバーフローポップアップ

📄 参照： references/editor-customization-popups.md

次の作業を行う場合は、このリファレンスを参照してください。

• クイック情報テンプレートとポップアップをカスタマイズする
• その他のイベントインジケーターのポップアップを設定する
• エディターのカスタマイズに関するベストプラクティスと一般的なシナリオを確認する

セルのカスタマイズ

📄 参照： references/cell-customization.md

次の作業を行う場合は、このリファレンスを参照してください。

• カスタムレンダリング用のセルテンプレートを作成する
• 日付ヘッダーテンプレートをカスタマイズする
• 時刻セルと勤務セルのスタイルを設定する
• 月セルテンプレートを設定する
• リソースヘッダーテンプレートを作成する
• セルにカスタムコンテンツを追加する

繰り返しエディター

📄 参照： references/recurrence-editor.md

次のことが必要な場合は、このリファレンスをお読みください。

• 繰り返しルールの形式（RRULE）を理解する
• 繰り返しパターン（日次、週次、月次、年次）を設定する
• 単独の繰り返しエディターコンポーネントを使用する
• FREQ、INTERVAL、BYDAY、BYMONTHDAY パラメーターを扱う
• 例外日（EXDATE）を管理する
• 繰り返しイベントのシリーズまたは単一の発生を編集する

ヘッダーのカスタマイズ

📄 参照： references/header-customization.md

次のことが必要な場合は、このリファレンスをお読みください。

• ヘッダーのツールバーをカスタマイズする
• ツールバー項目を追加または削除する
• カスタムのツールバーボタンを作成する
• ヘッダー行を設定する
• 日付範囲の表示をカスタマイズする
• ヘッダーイベントを扱う

クリップボード操作

📄 参照： references/clipboard-operations.md

次のことが必要な場合は、このリファレンスをお読みください。

• コピー（Ctrl+C）、切り取り（Ctrl+X）、貼り付け（Ctrl+V）操作を有効にする
• クリップボード設定を構成する
• カスタムのクリップボード操作を作成する
• クリップボードイベントを扱う

エクスポートと印刷

📄 参照： references/exporting.md

次のことが必要な場合は、このリファレンスをお読みください。

• イベントを ICS/iCal 形式でエクスポートする
• スケジューラーを Excel にエクスポートする
• スケジューラーを PDF にエクスポートする
• エクスポートオプションを設定する
• 印刷機能を実装する

スタイルとテーマ

📄 参照： references/styling-themes.md

次のことが必要な場合は、このリファレンスをお読みください。

• 組み込みテーマ（Material、Bootstrap、Fabric など）を適用する
• CSS でコンポーネントのスタイルをカスタマイズする
• カスタムイベントの色を設定する
• セルとビューのスタイルを設定する
• レスポンシブデザインを作成する

高度な機能

📄 参照： references/advanced-features.md

次のことが必要な場合は、このリファレンスをお読みください。

• 大規模なデータセット向けに仮想スクロールを有効にする
• 遅延読み込みを設定する
• コンポーネントの寸法（高さ、幅）を設定する
• 行の自動高さを有効にする
• ドラッグ＆ドロップ操作を扱う
• イベントのサイズを変更する
• 複数のスケジューラーインスタンスを管理する

イベントバッファー

📄 参照： references/event-buffer.md

次のことが必要な場合は、このリファレンスをお読みください。

• 各予約の前後にイベント前後のバッファー時間を追加する
• StartTime の前と EndTime の後に一定の分数を確保する（準備、回復、または切り替えのため）
• バッファーピル内にカスタムの bufferTemplate を描画する（アイコン、ラベル、時間のテキスト）
• バッファーを allowOverlap="false" と組み合わせ、確保した範囲に他の予定が侵入できないようにする
• ドラッグ＆ドロップを制限し、イベントを必要な専門分野に合致するリソースにのみ移動できるようにする
• ドラッグやサイズ変更のプレビュー中に、イベントの端に合わせてバッファーを再配置する

WebMCP 統合

📄 参照： references/webmcp-integration.md

次のことが必要な場合は、このリファレンスをお読みください。

• スケジューラーを、AI アシスタントおよび MCP 対応クライアント向けの型付きツール群として公開する
• enableWebMcp を有効にし、webMcpSettings（プレフィックス、ツールの許可リスト、許可するオリジン）を設定する
• providers で WebMcpScheduler モジュールを提供し、beforeWebMcpToolExecute イベントをバインドする
• webMcpSettings.tools で登録済みツールを絞り込む
• webMcpSettings.exposedTo でクロスオリジンの呼び出し元を制限する
• beforeWebMcpToolExecute から確認ダイアログを要求する、またはツール呼び出しをキャンセルする

状態の永続化

📄 参照： references/state-persistence.md

次のことが必要な場合は、このリファレンスをお読みください。

• 状態の永続化を有効にする
• 永続化するプロパティを設定する
• localStorage との連携を使用する
• 以前の状態を復元する
• 永続化された状態を消去する

アクセシビリティ

📄 参照： references/accessibility.md

次のことが必要な場合は、このリファレンスをお読みください。

• WCAG 2.1 への準拠を実装する
• キーボードナビゲーションを設定する
• ARIA 属性を設定する
• スクリーンリーダーに対応する
• フォーカス状態を管理する
• ハイコントラストテーマを使用する

ローカライズと国際化

📄 参照： references/localization.md

次の作業が必要な場合は、このリファレンスをお読みください。

• 多言語サポートを設定する
• カルチャーファイルを読み込む
• RTL（右から左への記述）サポートを有効にする
• 日付と時刻の書式をカスタマイズする
• カスタムローカライズを作成する

クイックスタートの例

Angular Scheduler を始めるための、最小限の動作する例です。

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public selectedDate: Date = new Date(2024, 0, 15);
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Team Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 11, 30)
      },
      {
        Id: 2,
        Subject: 'Project Review',
        StartTime: new Date(2024, 0, 15, 14, 0),
        EndTime: new Date(2024, 0, 15, 15, 30)
      }
    ]
  };
}

CSS のインポート（styles.css 内）：

@import '../node_modules/@syncfusion/ej2-material3-theme/styles/schedule/index.css';

よくあるパターン

パターン 1：複数のビューを持つ Scheduler

import { Component } from '@angular/core';
import { ScheduleModule, View } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, MonthService, TimelineViewsService, TimelineMonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [currentView]="currentView"
      [views]="views"
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public currentView: View = 'Week';
  public views: View[] = ['Day', 'Week', 'Month', 'TimelineWeek', 'TimelineMonth'];
  public eventSettings: object = { dataSource: [] };
}

パターン 2：リソースを持つ Scheduler

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel, GroupModel } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [group]="group"
      [eventSettings]="eventSettings">
      <e-resources>
        <e-resource 
          field='RoomId' 
          title='Room' 
          name='Rooms' 
          [dataSource]='roomDataSource'
          textField='RoomText' 
          idField='Id' 
          colorField='RoomColor'>
        </e-resource>
      </e-resources>
    </ejs-schedule>
  `
})
export class AppComponent {
  public group: GroupModel = { resources: ['Rooms'] };
  
  public roomDataSource: object[] = [
    { RoomText: 'Room 1', Id: 1, RoomColor: '#cb6bb2' },
    { RoomText: 'Room 2', Id: 2, RoomColor: '#56ca85' }
  ];

  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 11, 0),
        RoomId: 1
      }
    ]
  };
}

パターン 3：リモートデータのバインド

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  private dataManager: DataManager = new DataManager({
    url: 'url',
    adaptor: new WebApiAdaptor(),
    crossDomain: true
  });

  public eventSettings: EventSettingsModel = {
    dataSource: this.dataManager
  };
}

パターン 4：繰り返しイベント

import { Component } from '@angular/core';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [eventSettings]="eventSettings">
    </ejs-schedule>
  `
})
export class AppComponent {
  public eventSettings: EventSettingsModel = {
    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' // Repeats daily for 10 days
      },
      {
        Id: 2,
        Subject: 'Weekly Review',
        StartTime: new Date(2024, 0, 15, 14, 0),
        EndTime: new Date(2024, 0, 15, 15, 0),
        RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO;INTERVAL=1' // Every Monday
      }
    ]
  };
}

パターン 5：イベントのツールチップテンプレート

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScheduleModule, EventSettingsModel } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, MonthService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule, CommonModule],
  providers: [DayService, WeekService, MonthService],
  template: `
    <ejs-schedule 
      width='100%' 
      height='550px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings">
      <ng-template #eventSettingsTooltipTemplate let-data>
        <div class="tooltip-wrap">
          <div class="subject">{{data.Subject}}</div>
          <div class="time">From&nbsp;:&nbsp;{{data.StartTime | date:'short'}}</div>
          <div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;{{data.EndTime | date:'short'}}</div>
        </div>
      </ng-template>
    </ejs-schedule>
  `
})
export class AppComponent {
  public selectedDate: Date = new Date(2024, 0, 15);
  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Team Meeting',
        StartTime: new Date(2024, 0, 15, 10, 0),
        EndTime: new Date(2024, 0, 15, 12, 30)
      }
    ],
    enableTooltip: true // Required to show the tooltip template
  };
}

パターン 6：同時に表示するイベント数の制限（maxEventStack）

import { Component, ViewChild } from '@angular/core';
import { ScheduleComponent, ScheduleModule, EventSettingsModel, NavigatingEventArgs } from '@syncfusion/ej2-angular-schedule';
import { DayService, WeekService, WorkWeekService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScheduleModule],
  providers: [DayService, WeekService, WorkWeekService],
  template: `
    <ejs-schedule 
      #scheduleObj
      width='100%' 
      height='650px'
      [selectedDate]="selectedDate"
      [eventSettings]="eventSettings"
      [currentView]="currentView"
      (navigating)="onNavigating($event)">
      <e-views>
        <e-view option="Day" [maxEventStack]="getMaxStack()"></e-view>
        <e-view option="Week" [maxEventStack]="getMaxStack()"></e-view>
        <e-view option="WorkWeek" [maxEventStack]="getMaxStack()"></e-view>
      </e-views>
    </ejs-schedule>
  `
})
export class AppComponent {
  @ViewChild('scheduleObj') public scheduleObj?: ScheduleComponent;

  public selectedDate: Date = new Date(2024, 0, 15);
  public currentView: string = 'Week';
  public displayMode: string = 'limited';
  public maxEventsLimit: number = 1;
  public eventSettings: EventSettingsModel = { dataSource: [] };

  // 0 = show all overlapping events; N = show only N per cell
  public getMaxStack(): number {
    return this.displayMode === 'all' ? 0 : this.maxEventsLimit;
  }

  // Apply maxEventStack to all view options when switching views
  public onNavigating(args: NavigatingEventArgs): void {
    if (args.action === 'view' && this.scheduleObj) {
      const value = this.displayMode === 'all' ? 0 : this.maxEventsLimit;
      const currentViews: any[] = this.scheduleObj.views as any[];
      const updatedViews = currentViews.map((view: any) => ({ ...view, maxEventStack: value }));
      this.scheduleObj.setProperties({ views: updatedViews }, true);
      this.scheduleObj.dataBind();
      this.scheduleObj.refreshEvents();
    }
  }
}

パターン 7：イベントのバッファ（予約前／予約後）

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  ScheduleComponent,
  EventSettingsModel,
  ScheduleModule,
  View,
  DayService,
  TimelineViewsService
} from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ScheduleModule],
  providers: [DayService, TimelineViewsService],
  template: `
    <ejs-schedule
      #scheduleObj
      width="100%"
      height="550px"
      [selectedDate]="selectedDate"
      [currentView]="currentView"
      [allowOverlap]="false"
      [eventSettings]="eventSettings">
      <e-views>
        <e-view option="Day"></e-view>
        <e-view option="TimelineDay"></e-view>
        <e-view option="TimelineWeek"></e-view>
      </e-views>
    </ejs-schedule>

    <ng-template #bufferTemplate let-data>
      <div class="buffer-minimal" *ngIf="getBufferDuration(data) >= 10">
        <span class="buffer-duration">
          {{ getBufferDuration(data) }} min
        </span>
      </div>
    </ng-template>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('scheduleObj') public scheduleObj!: ScheduleComponent;
  @ViewChild('bufferTemplate', { static: true })
  public bufferTemplateRef: any;

  public selectedDate: Date = new Date();
  public currentView: View = 'TimelineDay';

  public eventSettings: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: 'Surgery',
        StartTime: new Date(2024, 0, 15, 9, 0),
        EndTime:   new Date(2024, 0, 15, 10, 30),
        IsAllDay: false,
        bufferBefore: 30,
        bufferAfter:  45
      }
    ],
    enableBuffer: true,
    fields: {
      bufferBefore: { name: 'bufferBefore' },
      bufferAfter:  { name: 'bufferAfter'  }
    }
  };

  public ngAfterViewInit(): void {
    this.eventSettings = {
      ...this.eventSettings,
      bufferTemplate: this.bufferTemplateRef
    };
  }

  public getBufferDuration(args: any): number {
    return args.bufferType === 'before'
      ? args.data.bufferBefore
      : args.data.bufferAfter;
  }
}

主な設定オプション

基本プロパティ

プロパティ	型	説明
currentView	View	アクティブなビューのモード（Day、Week、Month など）
selectedDate	Date	現在選択されている日付
eventSettings	EventSettingsModel	イベントのデータソースとフィールドのマッピング
views	View[]	Scheduler に表示するビューの配列
height	string	Scheduler の高さ（例：'550px'、'100%'）
width	string	Scheduler の幅（例：'100%'、'800px'）

イベント設定

プロパティ	型	説明
dataSource	object[] | DataManager	イベントのデータソース
fields	FieldModel	カスタムデータ構造のフィールドマッピング
enableTooltip	boolean	イベントのツールチップを有効にする
template	string	カスタムイベントテンプレート

ビューサービス（providers に注入する必要があります）

• DayService - 日ビュー
• WeekService - 週ビュー
• WorkWeekService - 稼働週ビュー
• MonthService - 月ビュー
• YearService - 年ビュー
• AgendaService - 予定表ビュー
• MonthAgendaService - 月間予定表ビュー
• TimelineViewsService - タイムラインの日、週、稼働週ビュー
• TimelineMonthService - タイムラインの月ビュー
• TimelineYearService - タイムラインの年ビュー

WebMCP サービス

• WebMcpScheduler - WebMCP 統合モジュールです。enableWebMcp が true の場合は、コンポーネントの providers 配列に指定してください。

よくあるイベント

イベント	説明
eventClick	イベントがクリックされたときに発生します
cellClick	セルがクリックされたときに発生します
cellDoubleClick	セルがダブルクリックされたときに発生します
popupOpen	エディター／クイック情報のポップアップが開く前に発生します
actionBegin	CRUD 操作の前に発生します
actionComplete	CRUD 操作の後に発生します
dataBinding	データバインドの前に発生します
dataBound	データバインドの後に発生します
beforeWebMcpToolExecute	WebMCP ツールがディスパッチされる前に発生します（enableWebMcp が true の場合）

よくあるユースケース

1. 予約管理システム

リソース管理、時間枠、空き状況の確認機能を備えた、医療機関、美容サロン、各種サービス向けの予約インターフェースを作成します。

参照：getting-started.md、resources.md、time-configuration.md

2. 会議室スケジューラー

リソースのグループ化、競合の検出、空き状況の表示機能を使って、複数の会議室を管理します。

参照：resources.md、appointments.md、data-binding.md

3. プロジェクトのタイムライン

ドラッグ＆ドロップ、サイズ変更、マイルストーンの追跡に対応したタイムラインビューで、プロジェクトのタスクを表示します。

参照：views-and-display.md、advanced-features.md、appointments.md

4. チームカレンダー

繰り返しイベント、複数のタイムゾーン、リソースのフィルタリングに対応した共有チームカレンダーを作成します。

参照：appointments.md、recurrence-editor.md、time-configuration.md、resources.md

5. 従業員のシフト計画

勤務時間、複数のリソース、タイムラインビューを使って、従業員のシフトを計画・管理します。

参照：time-configuration.md、resources.md、views-and-display.md

6. イベント管理ポータル

カレンダーアプリへのエクスポート（ICS）、カスタムエディターフォーム、テンプレートを備えたイベント管理システムを構築します。

参照：appointments.md、appointment-templates.md、editor-customization.md、exporting.md

7. マルチタイムゾーンカレンダー

タイムゾーンの変換と表示により、グローバルチーム向けに異なるタイムゾーンのイベントを扱います。

参照：time-configuration.md、appointments.md

8. カスタムカレンダーアプリケーション

カスタムセル、テンプレート、スタイルを使用して、完全にカスタマイズされたカレンダーアプリケーションを作成します。

参照：appointment-templates.md、cell-customization.md、editor-customization.md、styling-themes.md

9. AI 支援スケジューラー（WebMCP）

Scheduler を型付きツールのセットとして公開し、AI アシスタントまたは MCP 対応クライアントが document.modelContext を通じて作成、更新、削除、移動、ビューの切り替えを行えるようにします。

参照：webmcp-integration.md