syncfusion-blazor-scheduler について
Syncfusion Blazor Scheduler コンポーネントを扱う Blazor 開発者向けのスキルです。カレンダービュー、予定管理、データバインディング、繰り返しイベント、カスタマイズを扱います。
主な機能
- 01カレンダーとタイムラインのビュー
- 02予定の CRUD 操作
- 03繰り返しイベントとルール
- 04ドラッグ&ドロップとサイズ変更
- 05ローカル・リモートデータバインディング
- 06リソースのグループ化とスタイル設定
活用シーン
- 01Blazor のスケジュール画面の構築
- 02繰り返し予定と例外の設定
- 03リソース別の予定表示
- 04予定データのバインドと絞り込み
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ blazor-ui-components-skills --skill syncfusion-blazor-schedulerインストール後、Claude Code で/syncfusion-blazor-schedulerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/appointment-appearance.mdappointment-customization.mdappointment-drag-and-drop.mdappointment-resizing.mdappointments.mdcell-customization.mdclipboard.mdcrud-actions.mddata-binding.mddimensions.mdeditor-advanced-customization.mdeditor-template.mdevent-buffer.mdevents.mdexporting.mdgetting-started.mdheader-bar.mdheader-rows.mdics-import-and-printing.mdlocalization.mdquick-popup-and-validation.mdrecurring-events.mdresource-grouping-and-customization.mdresources.mdrow-auto-height.mdscheduler-styling.mdstate-persistence.mdtimescale.mdtimezone.mdview-configuration-and-customization.md詳細
Syncfusion Blazor Scheduler コンポーネント
このスキルを使用する場面
ユーザーが次のことを必要としている場合は、このスキルを使用してください。
- Blazor Scheduler コンポーネントを作成または構成する
- ローカルデータまたはリモートデータをバインドする
- 予定、イベント、またはカレンダーデータを管理する
- さまざまなカレンダービュー(日、週、月、タイムライン、アジェンダ)を設定する
- 繰り返しイベントまたは繰り返しパターンを実装する
- 予定の CRUD 操作(作成、読み取り、更新、削除)を処理する
- 予定のドラッグ&ドロップまたはサイズ変更を構成する
- 予定の前後に処置のバッファー時間を追加する
- リソースまたはグループ化を扱う
- タイムゾーンまたはローカライズを設定する
- Scheduler の外観または動作をカスタマイズする
- イベントとコールバックを処理する
- 状態を永続化する、またはデータバインディングを管理する
- アクセシビリティ機能を有効にする
- Scheduler のデータをエクスポートまたは印刷する
- 大規模なデータセット向けに仮想スクロールを設定する
- クリップボードのコピー、切り取り、または貼り付け機能を使用する
- カスタムツールバーを構成する
コンポーネントの概要
Syncfusion Blazor Scheduler は、次の機能を備えた包括的なカレンダーコンポーネントです。
- 予定を複数のビュー(日、週、月、タイムライン、アジェンダ、年)で表示する
- 完全な制御のもと、すべての CRUD 操作で予定を管理する
- iCalendar 互換の繰り返しルールで繰り返しイベントをサポートする
- 直感的なスケジュール設定のため、ドラッグ&ドロップとサイズ変更機能を有効にする
- 複数のリソースと柔軟なグループ化モデルを扱う
- IANA タイムゾーン変換による、タイムゾーンに対応した予定をサポートする
- テンプレート、EventRendered イベント、CSS クラスを使用して予定の外観をカスタマイズする
EnableBufferとBufferTemplateを使用して、予定の前後に処置のバッファーセグメントを描画する- 予定の重複を防止またはカスタマイズする(AllowOverlap プロパティ)
- 時間枠のブロックと読み取り専用の予定を構成する
- カスタムテンプレートを使用したインタラクティブなツールチップを表示する
- 状態を永続化し、ローカルデータまたはリモートデータのバインディングを管理する
- 予定を動的にフィルター、取得、更新する
- キーボード操作、アクセシビリティ(WCAG 2.2)、RTL をサポートする
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- NuGet パッケージによるインストール
- Blazor プロジェクトのセットアップ
- 必要な名前空間とサービスの追加
- 基本的なコンポーネントの初期化
- 最初の最小限の実行可能なサンプル
予定とイベントフィールド
📄 参照: references/appointments.md
- 組み込みの予定フィールド(Id、Subject、StartTime、EndTime、Location、Description、Timezone など)
- カスタムフィールドのマッピング、バインディング、検証
- ラベル、既定値、検証ルールを含むイベントフィールド設定
- 予定へのカスタムフィールドの追加
- 通常イベント、複数日にまたがるイベント、終日イベント、ブロックされたイベント
- 読み取り専用の予定と時間枠の空き状況
- イベントの重複のカスタマイズと防止(AllowOverlap)
予定の外観と管理
📄 参照: references/appointment-appearance.md
- EventRendered による予定の外観のスタイル設定
- ツールチップ(組み込み、カスタムテンプレート、条件付き)
- 予定の選択と取得(GetEventsAsync、GetCurrentViewEvents)
- Query を使用した予定のフィルター
- RefreshEventsAsync による予定の更新
予定のカスタマイズ
📄 参照: references/appointment-customization.md
- テンプレートベースのイベントのカスタマイズ
- スタイル設定用の EventRendered イベント
- 一括スタイル設定用の CssClass プロパティ
- カスタム属性とクラス
- イベントの外観の変更
- テンプレートを使用したツールチップのカスタマイズ
ドラッグ&ドロップ
📄 参照: references/appointment-drag-and-drop.md
- ドラッグ&ドロップ機能の有効化/無効化
- 単一および複数項目のドラッグ操作
- ドラッグイベントの処理と防止
- ドラッグ中のスクロール制御
- 端でのナビゲーションの開始
- ドラッグ間隔と外部ソース
- ドラッグ完了時のエディターの表示
サイズ変更イベント
📄 参照: references/appointment-resizing.md
- サイズ変更機能の有効化/無効化
- サイズ変更中のスクロール制御
- スクロール速度の設定
- サイズ変更の時間間隔
- 特定のサイズ変更操作の防止
イベントバッファー
📄 参照: references/event-buffer.md
ScheduleEventSettingsのEnableBufferでイベントバッファーを有効化- 予定モデルで必須となる
BufferBeforeフィールドとBufferAfterフィールド FieldBufferBeforeとFieldBufferAfterによるバッファーフィールドのマッピングBufferTemplateによるバッファーの外観のカスタマイズBufferTemplateContextのメンバー(IsBefore、Duration、Data)AllowOverlap="false"の場合のバッファーの動作- 対応ビュー(Day、Week、WorkWeek、TimelineDay、TimelineWeek、TimelineWorkWeek)
- ドラッグおよびサイズ変更時のバッファーの再アンカー
スケジューラービュー
📄 参照: references/views.md
- 12 種類の利用可能なビューモード(Day、Week、WorkWeek、Month、Agenda、MonthAgenda、TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear、Year)
- @bind-CurrentView プロパティによる現在/アクティブなビューの設定
- ビュー設定プロパティの表
- ScheduleView コンポーネントのプロパティ(Option、IsSelected、DateFormat、Readonly、ShowWeekend、WorkDays など)
- 時間単位のタイムスロットと 1 日表示に対応する Day ビュー
- Interval プロパティによる複数の連続した日(2 日、3 日)を表示する Day ビュー
- 7 日間(日曜日~土曜日)とすべての予定を表示する Week ビュー
- FirstDayOfWeek のカスタマイズ(1=月曜日、0=日曜日)に対応する Week ビュー
- デフォルトで平日(月~金)のみを表示する Work Week ビュー
- WorkDays int 配列によるビューごとの稼働日のカスタマイズ(0=日曜日、1=月曜日など)
- 月全体のカレンダーグリッドレイアウトを表示する Month ビュー
- MaxEventsPerRow プロパティでイベント表示数を制限/拡張できる Month ビュー
- 今後のイベントを時系列のリスト形式で表示する Agenda ビュー(デフォルトは 7 日間)
- AgendaDaysCount プロパティで日付範囲をカスタマイズできる Agenda ビュー
- 大規模なデータセットに対応する AllowVirtualScrolling を備えた Agenda ビュー
- 月間カレンダーとその下の予定リストを組み合わせた Month Agenda ビュー
- 1 日を横方向のレイアウトで表示する Timeline Day ビュー
- 7 日間を横方向に表示する Timeline Week ビュー
- 稼働日を横方向に表示する Timeline Work Week ビュー
- 月全体を横方向に表示する Timeline Month ビュー
- Orientation をカスタマイズでき、1 年全体を横方向に表示する Timeline Year ビュー
- 月を選択でき、予定インジケーターを備えたミニカレンダーを表示する Year ビュー
ビューの設定とカスタマイズ
📄 参照: references/view-configuration-and-customization.md
- ビュー固有の設定プロパティの表
- Day、Week、WorkWeek ビューで MaxEventStack を使用して、同時に表示する予定ラベル数を制限
- Interval プロパティでビューの間隔を拡張(3 日、2 週間、四半期、年間ビュー)
- DisplayName プロパティで拡張ビューの表示名をカスタマイズ
- StartHour/EndHour で特定の開始時刻と終了時刻を設定(例:「09:00」~「18:00」)
- 営業時間のみに時間範囲を制限
- ShowWeekend="false" でカレンダービューの週末を非表示
- ShowWeekNumber="true" で ISO 週番号を表示
- Readonly="true" でビューごとに読み取り専用モードを設定し、CRUD 操作を防止
- ビュー固有のテンプレート(EventTemplate、DateHeaderTemplate、CellTemplate など)
- ビューごとにイベントテンプレートをカスタマイズし、表示方法を変更
- ビューごとの日付ヘッダーテンプレートのカスタマイズ
- ビューごとのセルテンプレートとセルのカスタムコンテンツ
- ビューごとの DateFormat をカスタマイズして日付を表示
- CurrentView プロパティのバインドによるプログラムからのビュー切り替え
- ヘッダーツールバーの組み込みビュー切り替えボタンによるビューの移動
- グループ化されたスケジュール向けのビューごとのリソースヘッダーテンプレート
- リソースベースのビュー設定と表示オプション
イベントとインタラクション
📄 参照: references/events.md
- すべての Scheduler イベント(ActionBegin、ActionCompleted、Created、Destroyed など)
- イベント引数とアクションの種類
- 双方向バインディングとコールバック
- DataBinding イベントと DataBound イベント
- イベントの選択と取得
定期的なイベント
📄 参照: references/recurring-events.md
- 繰り返しルールの構文と iCalendar 形式
- FREQ、INTERVAL、COUNT、UNTIL プロパティ
- BYDAY、BYMONTHDAY、BYMONTH の設定
- 定期的なイベントの作成
- 例外日と発生回の編集
- 以降のイベントの編集/削除
CRUD 操作
📄 参照: references/crud-actions.md
- エディターまたは AddEventAsync で予定を作成
- 予定のインライン作成
- 適切な検証による予定の更新
- 1 件または複数の予定の削除
- サーバー側のデータベース操作
- 条件に基づく操作の制限
データバインディング
📄 参照: references/data-binding.md
- List コレクションを使用したローカルデータバインディング
- HTTP サービスを使用したリモートデータバインディング
- DataSource の設定
- クエリベースのフィルタリング
- 予定の動的な更新
- DataSource プロパティとイベントの設定
- 必要に応じたデータの読み込み
- 認証/認可用のカスタムヘッダーの設定
カスタマイズとスタイル設定
📄 参照: references/scheduler-styling.md
- CSS のカスタマイズ
- CssClass を使用したカスタムスタイル設定
- コンポーネントのスタイルの上書き
- レスポンシブデザインの調整
セルのカスタマイズ
📄 参照: references/cell-customization.md
- 縦表示およびタイムライン表示でのセル寸法
- カスタムコンテンツ用の CellTemplate
- ヘッダー用の CellHeaderTemplate
- 動的なスタイル設定用の OnRenderCell イベント
- 週末と特定の日付のスタイル設定
- MinDate と MaxDate による制限
- 複数セルおよび複数行の選択
ヘッダーバーとツールバーのカスタマイズ
📄 参照: references/header-bar.md
- ShowHeaderBar プロパティによるヘッダーの表示/非表示
- ツールバー設定用の ScheduleToolBar コンポーネント
- 組み込みツールバー項目(ScheduleToolBarPrevious、Next、DateRange、Today、Views、NewEvent)
- ScheduleToolBarCustom によるツールバーへのカスタム要素の追加
- カスタム項目用の ItemType オプション(Button、Input、Spacer、Separator)
- エクスポート、印刷、その他の操作用ボタンを備えたカスタムツールバーの作成
- リソースによるフィルタリング用のドロップダウンコントロールをツールバーに追加
- オーナーリソースによるフィルタリングを含む、実際のツールバー設定例
- EnableAdaptiveUI プロパティによるレスポンシブ/モバイル対応レイアウト
- アダプティブモードでのツールバーの集約と「New Event」ボタン
- 日/週表示の日付セルをカスタマイズする DateHeaderTemplate
- 動的な日付ヘッダーのスタイル設定に使用する ElementType.DateHeader を指定した OnRenderCell イベント
- 日付ヘッダーでの週末と特別な日付のスタイル設定
- 表示する日付範囲のテキストをカスタマイズする DateRangeTemplate
- DayHeaderTemplate による TimelineYear 表示のヘッダーのカスタマイズ
- TimelineYear の月ヘッダー用の MonthHeaderTemplate
- タイムライン表示の左インデント領域をカスタマイズする HeaderIndentTemplate
- タイムライン表示での縦向きおよび横向きの配置
- リソース別にグループ化されたビューのヘッダー
- 複数のテンプレートを組み合わせた高度なヘッダーレイアウト
ヘッダー行
📄 参照: references/header-rows.md
- ScheduleHeaderRow コンポーネントの構造とプロパティ
- HeaderRowType enum の選択肢(Year、Month、Week、Date、Hour)
- 各ヘッダー行タイプと互換性のあるビュー
- 基本的な複数レベルのヘッダー行の設定
- 長期間のタイムライン向けの年・月ヘッダー行
- 週単位の整理に使用する週番号ヘッダー行
- Interval=12 を使用した年間タイムライン全体の表示
- 詳細なスケジュール設定向けの日・時間ヘッダー行
- Template プロパティを使用したヘッダー行のカスタマイズ
- テンプレートのコンテキストと、テンプレート内での Date へのアクセス
- CSS クラスを使用したヘッダー行のスタイル設定
- ヘッダーレベルごとの色のカスタマイズ
- リソースでグループ化したビューでのヘッダー行
- 複数のヘッダー行の組み合わせ(2~5 レベル)
- ヘッダー行の順序と階層に関するガイドライン
- カルチャに応じたヘッダー行のローカライズ
- ISO 週番号の計算と表示
- 一般的なパターン(四半期、週単位、日単位、リソースビュー)
- 複数行を使用する際のパフォーマンスに関する考慮事項
エディターテンプレート
📄 参照: references/editor-template.md
- デフォルトのエディターウィンドウとダブルクリック時の動作
- Title プロパティを使用したエディターフィールドのラベルのカスタマイズ
- ValidationRules(Required、RegexPattern、MinLength、MaxLength)を使用したフィールドの検証
- OnPopupOpen イベントを使用したデフォルトの時間の長さの編集
- PopupOpenEventArgs をキャンセルしてエディター/クイックポップアップを防止
- ポップアップの種類(Editor、QuickInfo、EditEventInfo、ViewEventInfo、EventContainer など)
- OpenEditorAsync メソッドを使用したエディターウィンドウの手動表示
- EditorTemplate を使用した完全なカスタムエディターの作成
- EditorHeaderTemplate/EditorFooterTemplate を使用したエディターのヘッダーとフッターのカスタマイズ
- エディターテンプレートへのリソースドロップダウンの選択肢の追加
エディターの高度なカスタマイズ
📄 参照: references/editor-advanced-customization.md
- エディターテンプレートへの繰り返しパターンフィールドの追加
- エディターテンプレートへの DataAnnotations 検証の適用
- シングルクリック時のクイック情報ポップアップ(セルとイベント)
- ScheduleQuickInfoTemplates を使用したクイックポップアップの外観のカスタマイズ
- さまざまなポップアップ状況に応じたクイックポップアップテンプレートの種類(Cell、Event、Both)
クイックポップアップと検証
📄 参照: references/quick-popup-and-validation.md
- クイックポップアップのカスタマイズの組み合わせ
- クイックポップアップのカスタムヘッダー、コンテンツ、フッター
- ShowQuickInfo または OnPopupOpen イベントを使用したクイックポップアップの無効化
- 複数セルの選択と QuickInfoOnSelectionEnd プロパティ
- 複数日にわたる選択動作を制御する AllowMultiRowSelection
- セルの容量を超えた場合に表示されるその他のイベントインジケーターのポップアップ
- MoreEventsClicked イベントを使用したその他のイベントポップアップの防止
- CloseQuickInfoPopupAsync メソッドを使用したポップアップのプログラムによる終了
クリップボード操作
📄 参照: references/clipboard.md
- 予定のコピーと貼り付け
- イベントデータのクリップボードへのコピー
- 貼り付けの処理と検証
- 複数の予定に対する操作
- キーボードナビゲーションのショートカット
リソースとグループ化
📄 参照: references/resources.md
- ScheduleResource コンポーネントの構造とジェネリックパラメーター
- リソースフィールドのマッピング(Field、TextField、IdField、ColorField など)
- リソースフィールドの完全なリファレンステーブル
- List コレクションを使用したローカルリソースデータのバインド
- ExpandoObject を使用した動的モデルへのリソースのバインド
- DynamicObject のカスタム実装を使用したリソースのバインド
- ObservableCollection を使用した動的更新への対応
- 視覚的なグループ化を行わない複数リソース(AllowMultiple プロパティ)
- ScheduleGroup を使用した単一レベルのリソースグループ化
- 複数レベルの階層的なリソースグループ化(GroupIDField)
リソースのグループ化とカスタマイズ
📄 参照: references/resource-grouping-and-customization.md
- ByGroupID="false"による1対1のグループ化
- カレンダービューで日付ごとにリソースをグループ化(ByDate="true")
- リソース間でのイベント共有(AllowGroupEdit="true")
- テンプレートを使ったシンプルなリソースヘッダーのカスタマイズ
- タイムラインビューで複数列のリソースヘッダーを表示
- ExpandedFieldを使ったリソースの展開と折りたたみ
- HeaderTooltipTemplateを使ったリソースヘッダーのツールチップ
- ResourceColorFieldを使ったリソースの色の選択
- リソースごとのカスタム勤務時間(StartHourField、EndHourField)
- リソースごとのカスタム勤務日(WorkDaysField)
タイムスケールの設定
📄 参照: references/timescale.md
- タイムスケールのスロットと間隔
- メジャーおよびマイナータイムスケールの設定
- カスタムのタイムスケール形式
- 時刻の表示オプション
- 勤務時間の設定
勤務時間
📄 参照: references/working-hours.md
- 勤務時間の範囲の設定
- 勤務時間のハイライト表示
- ハイライトの色とスタイル
- リソースの営業時間
- 非勤務時間のカスタマイズ
タイムゾーン
📄 参照: references/timezone.md
- IANAタイムゾーンのサポート
- StartTimezoneフィールドとEndTimezoneフィールド
- タイムゾーンの変換
- 夏時間の処理
- タイムゾーンを考慮したスケジューリング
ローカライズ
📄 参照: references/localization.md
- 日付形式の設定(DateFormatプロパティ)
- 時刻形式の設定(TimeFormatプロパティ)
- 右から左への(RTL)表示のサポート(EnableRtlプロパティ)
仮想スクロール
📄 参照: references/virtual-scrolling.md
- 仮想スクロールの概要と利用するタイミング(リソースが100件以上、予定が5,000件以上)
- タイムラインビュー(TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、TimelineYear)で AllowVirtualScrolling を有効にする
- 大量の今後のイベントを含むリストに対するアジェンダビューの仮想スクロール
- リソースのグループ化を伴う Timeline Month ビューの仮想スクロール
- 仮想スクロールの利点(メモリ使用量の削減、スムーズなスクロール、DOM の最適化)
- 一度に表示するリソース数を制御する VirtualResourceCount プロパティ(デフォルトは30)
- 画面サイズに応じた VirtualResourceCount の設定(標準では20~50、大型ディスプレイでは100以上)
- リソースが300件以上で、予定がまばらな場合の仮想スクロール
- リソースのグループ化と階層的な構成を伴う仮想スクロール
- カスタムテンプレート(ResourceHeaderTemplate、EventTemplate)と組み合わせた仮想スクロール
- メタデータ表示用の仮想スクロールを使ったリソースヘッダーテンプレート
- カスタムイベント描画用の仮想スクロールを使ったイベントテンプレート
- EnableLazyLoading="true" プロパティによる予定の遅延読み込み
- ビューポートに基づいてデータを取得するオンデマンド方式の遅延読み込み
- ResourceId によるサーバー側の予定フィルタリングを使った遅延読み込み
- 遅延読み込み用のサーバー側コントローラーの実装(ResourceId クエリパラメーター)
- 遅延読み込みのパラメーター(StartDate、EndDate、ResourceId によるフィルタリング)
- リモートデータバインディング用の DataManager を使った仮想スクロール
- 大規模なデータセットに対する仮想スクロールと遅延読み込みの併用
- 仮想スクロールによるパフォーマンスの最適化(VirtualResourceCount の調整)
- まばらなデータを使ったパフォーマンスの最適化(すべてのリソースに毎日イベントがあるわけではありません)
- EnableMaxHeight、AllowKeyboard の設定によるパフォーマンスの最適化
- 仮想スクロール向けの CSS の最適化(will-change プロパティ、min-height)
- 仮想スクロールの制限(Month、Year、MonthAgenda ビューでは利用できません)
- 仮想スクロールの制限(TimelineYear の垂直方向の表示ではサポートが限定的です)
- 仮想スクロールが有効でないケース(リソースが100件未満の小規模なデータセット)
- セルの最適化に MaxEventsPerRow と仮想スクロールを組み合わせる方法
- スクロール時のオンデマンド読み込みとリソースの自動読み込みを伴う仮想スクロール
- 仮想スクロールのシナリオにおけるメモリ管理
- 実際の大規模なデータセットを使った仮想スクロールのパフォーマンステスト
状態の保持
📄 参照: references/state-persistence.md
- 保持されるプロパティ(ビュー、日付)
- ローカルストレージとの統合
エクスポートとインポート
📄 参照: references/exporting.md
- ExportToExcelAsync を使った XLSX/CSV 形式への Excel エクスポート
- カスタムフィールドとフィールドのフィルタリングによるエクスポート
- 繰り返しイベントの各発生を個別のレコードとしてエクスポート(IncludeOccurrences)
- CustomData オプションを使ったイベントデータの一部のカスタムエクスポート
- ExportFieldInfo による列ヘッダーのカスタマイズ
- カスタムファイル名によるエクスポート(FileName プロパティ)
- Excel ファイル形式(ExportType による XLSX と CSV の切り替え)
- 特定の日付形式によるエクスポート(DateFormat オプション)
- OnExcelExporting イベントを使ったエクスポート前の Excel シートのカスタマイズ
- セルの書式、ヘッダー、スタイルを設定する ExcelExport API
- ICS カレンダーの .ics 形式へのエクスポート(Outlook、Google Calendar と互換)
- カスタムファイル名による ICS エクスポート
ICS のインポートと印刷
📄 参照: references/ics-import-and-printing.md
- ImportICalendarAsync を使った外部 ICS ファイルからのイベントのインポート
- ICS ファイルのインポートに対応するファイルアップローダーの統合
- インポートしたイベントと既存の予定の統合
- オプションなしの PrintAsync メソッド(デフォルトの印刷)
- PrintOptions を指定した PrintAsync メソッド(幅/高さのカスタマイズ)
- 表示中のすべての予定を含む現在のビューの印刷
寸法
📄 参照: references/dimensions.md
- 高さと幅の設定
- レスポンシブなサイズ設定
- 行の高さの自動調整
- セルと列の寸法
- コンテナーの制約
行の自動高さ
📄 参照: references/row-auto-height.md
- 自動高さの有効化/無効化
- 行の高さの計算
- コンテンツのオーバーフロー処理
- レスポンシブな行サイズ調整
パフォーマンスと WebAssembly
📄 参照: references/webassembly-performance.md
@keyディレクティブを使用して、不要なコンポーネントの再レンダリングを回避する- PreventRender を使用して、スケジューラーイベント後の再レンダリングを削減する
クイックスタートの例
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.WorkWeek"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
<ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code{
DateTime CurrentDate = new DateTime(2026, 3, 24);
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData
{
Id = 1,
Subject = "Conference",
StartTime = new DateTime(2026, 3, 24, 9, 30, 0),
EndTime = new DateTime(2026, 3, 24, 11, 0, 0)
}
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
}
}
一般的なパターン
1. CRUD 操作
- 作成:
AddEventAsync()メソッドを使用するか、セルをダブルクリックしてエディターを開きます - 読み取り:
GetEventsAsync()、GetCurrentViewEvents()、またはGetBlockEventsAsync()を使用します - 更新: 予定を変更して
SaveEventAsync()を使用します - 削除:
DeleteEventAsync()メソッドを使用するか、複数選択の場合は Delete キーを押します - 空き状況の確認:
IsSlotAvailableAsync()を使用して重複を防ぎます
2. 予定の管理
- 読み取り専用の予定: 個々のイベントに
IsReadonly = trueを設定するか、Readonlyプロパティを使用します - 時間枠のブロック:
IsBlock = trueを設定して、その時間枠への予定の登録を防ぎます - 重複の制御:
AllowOverlap="false"を使用して重複を防ぎます - カスタムフィールド: 組み込みフィールド(Status、Priority など)以外のカスタムプロパティを追加します
- フィールドのマッピング: カスタムフィールド名には
ScheduleFieldタグを使用します
3. 外観のカスタマイズ
- テンプレート:
<Template>を使用して、予定の HTML をカスタマイズします - EventRendered: データに基づいて動的な CSS クラスを適用します
- CssClass: 予定データから定義済みの CSS クラスを適用します
- ツールチップ:
EnableTooltip="true"で有効にし、TooltipTemplateでカスタマイズします - セルのスタイル設定:
OnRenderCellイベントまたはCellTemplateを使用します
4. イベント処理
- ActionBegin: 操作の前に処理を割り込みます(検証、キャンセル、重複の確認)
- ActionCompleted: 操作の成功後に処理を実行します
- EventRendered: 予定の外観をカスタマイズします
- OnDragStart / OnResizeStart: ドラッグ/サイズ変更の動作を制御します
- TooltipOpening: ツールチップを条件に応じて表示/非表示にします
5. ビューの管理
CurrentViewプロパティを設定して、アクティブなビューを変更します- ビュー固有のプロパティを使って、各ビューを個別に設定します
- カスタムビューラベルには
DisplayNameを使用します Intervalプロパティを使ってビューを拡張します(例:3 日表示)
6. 繰り返しイベント
- 標準の iCalendar
RecurrenceRule形式(FREQ、INTERVAL、COUNT、UNTIL)を使用します - 発生回を除外するには、
RecurrenceExceptionに日付を追加します - 編集した発生回には
RecurrenceIDを使用します - FREQ プロパティを使用して、日次、週次、月次、年次のパターンに対応します
7. データバインディング
- ローカル:
DataSourceを List にバインドします - リモート:データを返す HTTP サービスにバインドします
- サーバー側のフィルタリングには
Queryプロパティを使用します - 全体を更新せずにデータを再読み込みするには、
RefreshEventsAsync()を呼び出します
主なプロパティと設定
| プロパティ | 目的 | 例 |
|---|---|---|
Height | スケジューラーの高さ(ピクセル/パーセント) | Height="650px" |
Width | スケジューラーの幅(ピクセル/パーセント) | Width="100%" |
CurrentView | アクティブなビュー(Day、Week、Month など) | CurrentView="View.Week" |
SelectedDate | 現在表示されている日付 | @bind-SelectedDate="@date" |
AllowDragAndDrop | ドラッグ機能の有効/無効 | AllowDragAndDrop="true" |
AllowResizing | サイズ変更機能の有効/無効 | AllowResizing="true" |
AllowMultiDrag | 複数の予定のドラッグを許可 | AllowMultiDrag="true" |
AllowOverlap | 予定の重複を防止 | AllowOverlap="false" |
AllowInline | セルのクリックによるインラインでの簡易作成 | AllowInline="true" |
Readonly | 閲覧専用モード(CRUD なし) | Readonly="true" |
MinDate | 最小日付の境界 | MinDate="new DateTime(2026,1,1)" |
MaxDate | 最大日付の境界 | MaxDate="new DateTime(2026,12,31)" |
CssClass | スタイル設定用のカスタム CSS クラス | CssClass="custom-scheduler" |
EnableMaxHeight | 予定をセルの高さ全体に表示 | EnableMaxHeight="true" |
EnableIndicator | 複数の予定がある場合にインジケーターを表示 | EnableIndicator="true" |
EnableAutoRowHeight | コンテンツに合わせて行の高さを自動調整 | EnableAutoRowHeight="true" |
EnableBuffer | 予定の前後にバッファーセグメントを描画(ScheduleEventSettings に設定) | EnableBuffer="true" |
一般的なユースケース
- 従業員のスケジュール管理 - ドラッグ&ドロップと承認ワークフローに対応した複数のリソース
- 会議室の予約 - タイムゾーンに対応したリソースベースの予約
- 医師の診療予約 - 患者のブロック機能に対応した繰り返し予約枠
- プロジェクトのタスク管理 - 進捗状況を追跡できるタイムラインビュー
- 教育機関の時間割 - リソースごとにグループ化された複数のクラス
- シフト管理 - 勤務時間、繰り返しに対応したシフトパターン
- イベントカレンダー - 繰り返しとフィルタリングに対応した公開イベント
- フィールドサービスの配車 - オフライン対応のモバイルフレンドリーな機能
次のステップ: ユースケースに応じた適切なリファレンスファイルを読み、具体的な機能と実装の詳細を確認してください。