syncfusion-aspnetcore-scheduler

ASP.NET Core Scheduler の実装

Syncfusion ASP.NET Core Scheduler は、予定、イベント、スケジュールを管理するための包括的なコンポーネントです。複数のビュー、リソース、定期的なイベント、幅広いカスタマイズオプションをサポートし、カレンダーベースのアプリケーションを柔軟に作成できます。

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

• 予定の管理： カレンダーの予定の作成、編集、削除
• 複数ユーザーのスケジュール管理： 複数のユーザーやリソースを対象としたリソーススケジュールの実装
• カレンダービュー： 日、週、月、タイムライン、アジェンダ形式でのイベント表示
• 定期的なイベント： 複雑な繰り返しルールを使用した予定の管理
• データ統合： Scheduler へのローカルまたはリモートデータソースのバインド
• カスタムテンプレート： イベントの表示方法とテンプレートのカスタマイズ
• 勤務時間： 営業時間、稼働日、タイムゾーンの設定
• イベント操作： ドラッグアンドドロップによる再スケジュール、サイズ変更、インライン編集

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• Tag Helper とスクリプトリソースの追加
• Script Manager の登録
• Scheduler の基本的な初期化
• 予定の読み込みと既定の日付／ビューの設定

予定の管理

📄 参照： references/appointments.md

• 予定のデータ構造とフィールドマッピング
• 通常、終日、複数日にわたる、定期的なイベントの作成
• 予定のプロパティ（Id、Subject、StartTime、EndTime、Location、Description）
• 定期的な予定と繰り返しルール
• 定期的なイベントの例外処理
• ドラッグアンドドロップとインライン編集

CRUD 操作

📄 参照： references/crud-operations.md

• 予定の追加（エディターウィンドウ、addEvent メソッド、サーバー側での挿入）
• 予定の編集（saveEvent メソッド、通常および定期的なイベント）
• 予定の削除（deleteEvent メソッド、シリーズと個々の発生の処理）
• 競合と検証の処理
• サーバー側のデータベース操作
• 複数の変更に対する一括操作

クリップボード操作

📄 参照： references/clipboard-actions.md

• allowClipboard プロパティによるクリップボードサポートの有効化
• Scheduler のメソッドを使用した切り取り、コピー、貼り付け操作
• ビュー間および Scheduler 間でのクリップボード操作

仮想スクロール

📄 参照： references/virtual-scrolling.md

• Month ビューと TimelineMonth ビューでの allowVirtualScrolling の有効化
• パフォーマンステスト用の大規模なイベントおよびリソースデータセットの生成

印刷、Excel エクスポート、iCalendar（ICS）

📄 参照： references/export-print.md

• 既定またはカスタムの高さ、幅、選択した日付での Scheduler の印刷
• フィールドマッピングをカスタマイズした予定の Excel へのエクスポート
• 予定の iCalendar（.ics）ファイルへのエクスポート
• Uploader を使用した iCalendar（.ics）ファイルからの予定のインポート

ビューと設定

📄 参照： references/views-and-modes.md

• 使用可能なビューの種類（Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda、Timeline ビュー）
• currentView の設定とビューの切り替え
• e-schedule-views を使用したビュー固有の設定
• 開始／終了時刻、稼働日、タイムスケールのカスタマイズ
• 日付形式と週末の表示設定
• セルごとに表示するイベント数を制限する最大イベントスタックの設定

スケジュール機能

📄 参照： references/scheduling-features.md

• タイムスケールの設定（間隔とスロット数）
• 稼働日と営業時間の設定
• タイムゾーンのサポート（IANA タイムゾーン）
• 繰り返しパターン（RFC 5545 形式）
• リソースの設定とグループ化
• タイムラインビューと月ビューでの行の自動高さ調整
• レスポンシブレイアウトに対応するアダプティブ UI
• スケジュール設定の完全な例

データバインディング

📄 参照： references/data-binding.md

• DataSource を使用したローカルデータバインディング
• ODataV4Adaptor を使用したリモートデータバインディング
• カスタムアダプターの作成
• クエリパラメーターとフィルター
• AJAX によるデータ読み込み
• UrlAdaptor を使用した CRUD 操作の設定
• Google Calendar との連携

リソースとグループ化

📄 参照： references/resources-and-grouping.md

• リソーススケジュールパターンの概要
• 単一および複数リソースのスケジュール
• リソースのグループ化、色のメタデータ、営業時間
• タイムラインビューとリモートリソースバインディング

カスタマイズとテンプレート

📄 参照： references/customization.md

• イベントテンプレートとセルテンプレート
• eventRendered イベントを使用したイベントのカスタマイズ
• 日付ヘッダーテンプレート
• クイック情報テンプレート
• CSS クラスのカスタマイズ
• ツールチップテンプレートと表示オプション
• カスタムエディターウィンドウの設定
• イベントの重複の防止

高度な機能

📄 参照： references/advanced-features.md

• リソースのグループ化と複数リソースのスケジュール
• タイムゾーンのサポートと変換
• 状態の永続化
• ローカライズとアクセシビリティ
• インラインでの予定編集
• 読み取り専用モードと予定のブロック
• レート制限のガイダンス
• タイムゾーンの検証
• ロールベース認証の例

クイックスタートの例

<head>
    
    
</head>
<body>
    
    <ejs-scripts></ejs-scripts>
</body>


@addTagHelper *, Syncfusion.EJ2

<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2024, 3, 28)" currentView="Week">
    <e-schedule-eventsettings dataSource="ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

// Controller
public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.datasource = new List<AppointmentData>
        {
            new AppointmentData { 
                Id = 1, 
                Subject = "Meeting", 
                StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
                EndTime = new DateTime(2024, 3, 28, 10, 0, 0)
            }
        };
        return View();
    }
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

一般的なパターン

イベントをプログラムで追加する

// Use addEvent method to create appointments
<script>
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.addEvent({
    Id: 2,
    Subject: 'New Meeting',
    StartTime: new Date(2024, 2, 28, 10, 0),
    EndTime: new Date(2024, 2, 28, 11, 0)
});
</script>

CRUD 操作を処理する

// Server-side in DataManager with CrudUrl
var dataManager = new DataManager() {
    Url = "Home/GetData",
    Adaptor = "UrlAdaptor",
    CrudUrl = "Home/UpdateData",
    // Configure server-side CORS with explicit allowed origins rather than relying on a client-side CrossDomain flag.
};

繰り返しイベントを作成する

// RecurrenceRule follows iCalendar (RFC 5545) format
new AppointmentData {
    Id = 1,
    Subject = "Daily Standup",
    StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
    EndTime = new DateTime(2024, 3, 28, 9, 30, 0),
    RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10"
}

複数のビューを設定する

<ejs-schedule id="schedule" currentView="Week">
    <e-schedule-views>
        <e-schedule-view option="Day"></e-schedule-view>
        <e-schedule-view option="Week"></e-schedule-view>
        <e-schedule-view option="Month"></e-schedule-view>
        <e-schedule-view option="TimelineDay"></e-schedule-view>
    </e-schedule-views>
</ejs-schedule>

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

Scheduler の基本プロパティ

• currentView：アクティブなビューの種類（Day、Week、WorkWeek、Month、Year、Agenda、MonthAgenda、TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear）
• selectedDate：Scheduler に表示されている現在の日付
• readonly：true の場合、すべての CRUD 操作を無効にします
• allowDragAndDrop：ドラッグ＆ドロップを有効にします（デフォルト：true）
• allowResizing：イベントのサイズ変更を有効にします（デフォルト：true）
• allowMultiDrag：複数のイベントを同時にドラッグできるようにします
• allowInline：イベントの件名をインラインで編集できるようにします
• allowOverlap：false の場合、イベントの重複を防止します
• allowClipboard：Scheduler でクリップボード操作（切り取り、コピー、貼り付け）を有効にします（デフォルト：false）。
• rowAutoHeight：同じ時間範囲内のすべての予定が収まるように作業セルの高さを自動調整します（タイムラインビューと月ビューに適用）
• enableAdaptiveUI：小さい画面向けのアダプティブ（レスポンシブ）レイアウトを有効にします
• height と width：サイズの設定
• cssClass：スタイル設定用のカスタム CSS クラス

イベント設定のプロパティ

• dataSource：予定データ（配列または DataManager）をバインドします
• template：イベント表示用のカスタムテンプレート
• enableTooltip：予定のツールチップを表示します
• tooltipTemplate：ツールチップの内容をカスタマイズします
• enableMaxHeight：イベントがセルの高さ全体を占めるようにします
• enableIndicator：複数のイベントがある場合に「さらに表示」インジケーターを表示します
• spannedEventPlacement：複数日にまたがるイベントの配置（AllDayRow または TimeSlot）
• sortComparer：重複するイベント用のカスタム並べ替え関数
• editFollowingEvents：現在の繰り返しイベントと以降のイベントを編集できるようにします
• maxEventStack：ビューごとに、セル内に表示するイベントラベルの最大数です。0 の場合はすべてのイベントを表示し、正の値の場合はその数に加えて +n more インジケーターを表示します。

イベントフィールドのマッピング

• id：一意の予定識別子（必須）
• subject：予定のタイトル
• startTime：開始日時（必須）
• endTime：終了日時（必須）
• isAllDay：終日イベントのフラグ
• location：イベントの場所
• description：イベントの詳細
• recurrenceRule：繰り返しパターン（iCalendar 形式）
• recurrenceID：例外における親の繰り返しイベント ID
• recurrenceException：繰り返しから除外する日付
• followingID：「以降のイベント」の編集における親イベント ID
• startTimezone：開始時刻のタイムゾーン（IANA タイムゾーン名）
• endTimezone：終了時刻のタイムゾーン
• isReadonly：個別イベントの読み取り専用フラグ
• isBlock：時間枠をブロックするフラグ

重要なイベント

• actionBegin：CRUD 操作の前に発生します
• actionComplete：CRUD 操作の完了後に発生します
• actionFailure：サーバーエラー時に発生します
• eventRendered：イベントの描画前に発生します（カスタマイズ用）
• dragStart：ドラッグ開始時に発生します
• dragStop：ドラッグ終了時に発生します
• resizeStart：サイズ変更の開始時に発生します
• popupOpen：エディターウィンドウを開く前に発生します
• tooltipOpen：ツールチップを表示する前に発生します
• dataBound：データバインディングの完了後に発生します

パブリックメソッド

• addEvent(eventData)：1 件または複数の予定を追加します
• saveEvent(eventData, action)：既存の予定を更新します
• deleteEvent(eventData, action)：予定を削除します
• getEvents()：すべての予定を取得します
• getCurrentViewEvents()：現在のビューに表示されている予定を取得します
• getEventDetails(element)：UI 要素からイベントデータを取得します
• refreshEvents()：全体を再読み込みせずに予定を更新します
• navigateTo(date)：指定した日付に移動します
• navigatePrevious()：前の期間に移動します
• navigateNext()：次の期間に移動します
• isSlotAvailable(date, endDate, resourceId)：時間枠が空いているか確認します
• openOverlapAlert()：重複の検証アラートを表示します
• cut(elements)：指定した予定をクリップボードに切り取ります（allowClipboard="true" が必要です）
• copy(elements)：指定した予定をクリップボードにコピーします（allowClipboard="true" が必要です）
• paste(targetElement)：クリップボードの内容を対象のセルに貼り付けます（allowClipboard="true" が必要です）
• closeQuickInfoPopup()：クイック情報ポップアップを閉じます（コンテキストメニューを開く場合に便利です）

関連スキル

• データバインディングパターン - データソースの接続
• カスタムイベントテンプレート - スタイルと表示
• リソーススケジューリング - 複数ユーザーとリソースの管理