syncfusion-winui-scheduler

Syncfusion WinUI Scheduler（SfScheduler）の実装

WinUI アプリケーションに Syncfusion® SfScheduler コントロールを実装するための包括的なガイドです。SfScheduler は、8 種類以上のビュー、予定の管理、リソースのグループ化、スケジュールやイベントを管理するための幅広いカスタマイズオプションなど、豊富なスケジュール機能とカレンダー機能を提供します。

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

ユーザーが次のことを必要としている場合は、すぐにこのスキルを使用してください。

• WinUI アプリケーションにカレンダーまたはスケジューラーコンポーネントを実装する
• 予定の予約やイベント管理のインターフェイスを作成する
• 会議のスケジュール管理や時間管理のツールを構築する
• 日、週、月、またはタイムラインビューでイベントを表示する
• 予定のドラッグ＆ドロップや編集に対応する
• リソースベースのスケジューリング（部屋、従業員、機器）を実装する
• 繰り返しの予定やイベントに対応する
• 予定のタイムゾーンを管理する
• アクセシビリティ機能を備えたカレンダービューを作成する
• パフォーマンス向上のため、予定をオンデマンドで読み込む機能を構築する

Scheduler の概要

Syncfusion WinUI Scheduler（SfScheduler） は、複数のビューで予定を表示し、ユーザーが効率的に予定を作成、編集、管理できる包括的なカレンダーおよびスケジューリングコントロールです。

主な機能

• 組み込みビューを 8 種類搭載： Day、Week、WorkWeek、TimelineDay、TimelineWeek、TimelineWorkWeek、TimelineMonth、Month
• 予定の管理： 組み込みエディターを使って予定を作成、編集、削除できます
• ドラッグ＆ドロップ： 直感的なドラッグ＆ドロップで予定を変更できます
• 繰り返しイベント： 例外を含む、日単位、週単位、月単位、年単位の繰り返しパターンに対応します
• リソースのグループ化： リソース（人、部屋、機器）ごとに予定をグループ化できます
• タイムゾーン対応： 複数のタイムゾーンにまたがる予定を扱えます
• アクセシビリティ： 完全なキーボード操作、スクリーンリーダー対応、WCAG 準拠
• ローカライズ： 世界各地の日付／時刻形式とカルチャに対応します
• テーマ設定： ライト、ダーク、ハイコントラストの各テーマを備えた Fluent Design System
• オンデマンド読み込み： 大量の予定データセットに対するパフォーマンスを最適化します
• コンテキストメニュー： 組み込みおよびカスタマイズ可能なコンテキストメニュー
• リマインダー： 予定のリマインダー通知

コンポーネントの識別情報

• パッケージ： Syncfusion.Scheduler.WinUI
• 名前空間： Syncfusion.UI.Xaml.Scheduler
• クラス： SfScheduler

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

このセクションでは、ユーザーのニーズに応じて参照するリファレンスファイルをご案内します。各リファレンスには、包括的なドキュメント、コード例、トラブルシューティングのガイダンスが含まれています。

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストールとセットアップ
• 最初の WinUI Scheduler アプリケーションの作成
• XAML と C# での基本的なスケジューラーの初期化
• 予定を含む最小限の動作例
• ViewType の設定（Day、Week、Month など）
• 週の開始曜日の設定
• 名前空間のインポートと基本構造

予定の管理

基本的な予定

📄 参照： references/appointments.md

• ScheduleAppointment クラスと ScheduleAppointmentCollection の理解
• StartTime、EndTime、Subject を指定した予定の作成
• スケジューラーへの予定の追加
• AppointmentMapping プロパティを使ったカスタム予定マッピング
• カスタム業務オブジェクトの予定へのバインド
• IsAllDay プロパティを使った終日の予定
• 複数日にわたる予定
• 予定の順序と内部配置
• データバインディングでの ItemsSource の使用

予定の編集

📄 参照： references/appointment-editing.md

• 組み込みの予定エディターダイアログ
• UI からの予定の作成
• 既存の予定の編集
• エディターからの予定の削除
• エディターダイアログの外観のカスタマイズ
• 予定の検証ルール
• エディターイベントの処理
• プログラムによる予定の編集

予定のドラッグ＆ドロップ

📄 参照： references/appointment-drag-drop.md

• ドラッグ＆ドロップ機能の有効化／無効化
• ドラッグによる予定の再スケジュール
• ドラッグ＆ドロップイベント（AppointmentDragStarting、AppointmentDragOver、AppointmentDrop）
• 特定のビューまたは時間枠にドラッグ＆ドロップを制限
• ドラッグ操作中の視覚的なフィードバック
• ドラッグ＆ドロップの検証処理
• 特定の予定がドラッグされないようにする

ビューの種類と構成

日表示と週表示

📄 参照： references/day-week-views.md

• ViewType.Day を使用した日表示の構成
• ViewType.Week を使用した週表示の設定
• ViewType.WorkWeek を使用した平日（月曜日～金曜日）表示
• TimeInterval プロパティによる時間間隔のカスタマイズ
• TimeIntervalSize による時間枠の高さの調整
• 柔軟な稼働日の構成
• NonWorkingDays プロパティによる非稼働日の設定
• 時刻目盛りの形式のカスタマイズ
• 開始時刻と終了時刻の構成

タイムライン表示

📄 参照： references/timeline-views.md

• 横方向の日表示用の TimelineDay ビュー
• 週単位のタイムライン用の TimelineWeek ビュー
• 平日単位のタイムライン用の TimelineWorkWeek ビュー
• 月単位のタイムライン用の TimelineMonth ビュー
• タイムライン表示での時間間隔のカスタマイズ
• TimeIntervalSize による時間枠の幅の調整
• 水平方向のスクロール動作
• タイムライン固有のカスタマイズオプション
• タイムライン表示での柔軟な稼働日の設定

月表示

📄 参照： references/month-view.md

• ViewType.Month を使用した月表示の構成
• 予定一覧表示との連携
• 表示する週数の構成
• 月のセル内の予定インジケーター
• 月のセルの外観のカスタマイズ
• 前月および翌月の日付の表示
• 月間ナビゲーションのパターン
• 今日の日付の強調表示

ナビゲーションと表示

日付のナビゲーション

📄 参照： references/date-navigations.md

• プログラムによる特定の日付への移動
• 現在表示されている日付を指定する DisplayDate プロパティ
• 前後への移動
• ビューの変更を追跡する ViewChanged イベント
• 日付変更イベントの処理
• プログラムによるビューの切り替え
• 日付範囲の検証

ヘッダーのカスタマイズ

📄 参照： references/header.md

• スケジューラーヘッダーの外観のカスタマイズ
• 日付ヘッダー形式のカスタマイズ
• 日ヘッダー形式の構成
• ヘッダーテンプレートのカスタマイズ
• ヘッダーの高さの調整
• ヘッダーテキストのスタイル設定
• ビューヘッダーのパターン

リソース管理

リソースのグループ化

📄 参照： references/resource-grouping.md

• リソース（人員、部屋、機器）の概念の理解
• Id、Name、Foreground、Background を指定した SchedulerResource オブジェクトの作成
• ResourceCollection へのリソースの追加
• 予定へのリソースの割り当て
• リソース単位でグループ化する ResourceGroupType.Resource
• 日付単位でグループ化する ResourceGroupType.Date
• 複数リソースのサポート
• リソースの外観のカスタマイズ
• 複数のリソース間での予定の共有

イベントと操作

スケジューラーイベント

📄 参照： references/events.md

• ビューの種類変更時の ViewChanged イベント
• セル操作時の CellTapped イベント
• ダブルタップ処理用の CellDoubleTapped イベント
• 予定選択時の AppointmentTapped イベント
• XAML とコードでのイベントハンドラーの設定
• イベント引数のプロパティとデータ
• ユーザー操作の処理

コンテキストメニューとコマンド

📄 参照： references/context-flyout-commands.md

• 組み込みのコンテキストメニュー機能
• カスタムコンテキストメニュー項目の追加
• コンテキストメニューのコマンド
• コンテキストメニューイベントの処理
• メニューの外観のカスタマイズ
• アクション用のコマンドパターン

高度な機能

タイムゾーンのサポート

📄 参照： references/time-zone.md

• スケジューラーの TimeZone プロパティの設定
• StartTimeZone と EndTimeZone を使用した予定ごとのタイムゾーン
• 表示するタイムゾーンの設定
• 夏時間への対応
• タイムゾーンをまたぐ予定の変換
• UI でのタイムゾーン表示
• 複数のタイムゾーンに対応するアプリケーションのベストプラクティス

オンデマンド読み込み

📄 参照： references/load-on-demand.md

• パフォーマンス向上のためのオンデマンド読み込みの有効化
• 動的読み込みのための QueryAppointments イベント
• 読み込みインジケーターの表示
• 大量の予定データセットの効率的な処理
• 日付範囲に基づく読み込み
• パフォーマンス最適化の手法
• 遅延読み込みのパターン

リマインダー

📄 参照： references/reminder.md

• 予定のリマインダーの設定
• リマインダーのアラート機能
• リマインダーウィンドウのカスタマイズ
• スヌーズ機能
• リマインダー間隔のカスタマイズ
• リマインダー通知

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

アクセシビリティ

📄 参照： references/accessibility.md

• キーボードナビゲーション（Tab、矢印キー、Enter、Escape）
• スクリーンリーダーのサポート（ナレーターとの互換性）
• WCAG 2.1 への準拠
• フォーカスインジケーターと視覚的なフィードバック
• アクセシブルな予定の作成と編集
• ハイコントラストテーマのサポート
• アクセシビリティのベストプラクティス

ローカライズ

📄 参照： references/localization.md

• スケジューラーのローカライズ設定
• 各カルチャ用のリソースファイル（.resw）の作成
• カルチャ固有の日付と時刻の書式設定
• スケジューラー UI の文字列のローカライズ
• RTL（右から左）言語のサポート
• 複数言語のサポートパターン

カスタマイズとテーマ設定

テーマ

📄 参照： references/themes.md

• 組み込みの Fluent Design テーマ（Light、Dark、HighContrast）
• スケジューラーへのテーマの適用
• カスタムテーマの作成
• ThemeResource による色のカスタマイズ
• テーマキーのオーバーライド
• GitHub 上のテーマリソースファイル
• レスポンシブなテーマ切り替え

クイックスタートの例

WinUI Scheduler を使い始めるための最小限の例を示します。

XAML の設定

<Window
    x:Class="SchedulerApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    
    <Grid>
        <scheduler:SfScheduler x:Name="Schedule" 
                              ViewType="Week" 
                              FirstDayOfWeek="Monday" />
    </Grid>
</Window>

C# のコードビハインド

using Syncfusion.UI.Xaml.Scheduler;
using System;

namespace SchedulerApp
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // Create appointment collection
            var appointments = new ScheduleAppointmentCollection();
            
            // Add a sample appointment
            appointments.Add(new ScheduleAppointment
            {
                StartTime = DateTime.Now.Date.AddHours(10),
                EndTime = DateTime.Now.Date.AddHours(12),
                Subject = "Team Meeting",
                Location = "Conference Room A",
                Notes = "Discuss Q1 goals"
            });
            
            // Set appointments to scheduler
            Schedule.ItemsSource = appointments;
        }
    }
}

結果

今日の午前 10 時から午後 12 時まで予定が 1 件登録された、週表示のスケジューラーが作成されます。

よく使われるパターン

パターン 1：カスタム予定のバインド

ScheduleAppointment ではなく、カスタムのビジネスオブジェクトを使用する場合：

// Custom appointment class
public class Meeting
{
    public string Title { get; set; }
    public DateTime From { get; set; }
    public DateTime To { get; set; }
    public bool AllDay { get; set; }
}

<scheduler:SfScheduler x:Name="Schedule" 
                      ItemsSource="{Binding Meetings}">
    <scheduler:SfScheduler.AppointmentMapping>
        <scheduler:AppointmentMapping
            Subject="Title"
            StartTime="From"
            EndTime="To"
            IsAllDay="AllDay"/>
    </scheduler:SfScheduler.AppointmentMapping>
</scheduler:SfScheduler>

パターン 2：繰り返し予定

var recurringAppointment = new ScheduleAppointment
{
    StartTime = DateTime.Now.Date.AddHours(9),
    EndTime = DateTime.Now.Date.AddHours(10),
    Subject = "Daily Standup",
    RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10"
};

パターン 3：リソースベースのスケジュール設定

// Create resources
var resources = new ObservableCollection<SchedulerResource>
{
    new SchedulerResource 
    { 
        Id = "1", 
        Name = "Conference Room A",
        Background = new SolidColorBrush(Colors.Blue)
    },
    new SchedulerResource 
    { 
        Id = "2", 
        Name = "Conference Room B",
        Background = new SolidColorBrush(Colors.Green)
    }
};

Schedule.ResourceCollection = resources;
Schedule.ResourceGroupType = ResourceGroupType.Resource;

// Assign appointment to resource
var appointment = new ScheduleAppointment
{
    StartTime = DateTime.Now.Date.AddHours(10),
    EndTime = DateTime.Now.Date.AddHours(11),
    Subject = "Product Demo",
    ResourceIdCollection = new ObservableCollection<object> { "1" }
};

パターン 4：ビュータイプの切り替え

// Switch between views programmatically
public void SwitchToMonthView()
{
    Schedule.ViewType = SchedulerViewType.Month;
}

public void SwitchToTimelineView()
{
    Schedule.ViewType = SchedulerViewType.TimelineWeek;
}

パターン 5：タイムゾーンの処理

// Set scheduler time zone
Schedule.TimeZone = TimeZoneInfo.FindSystemTimeZoneById("Pacific Standard Time");

// Appointment with specific time zones
var appointment = new ScheduleAppointment
{
    StartTime = new DateTime(2024, 3, 22, 10, 0, 0),
    EndTime = new DateTime(2024, 3, 22, 11, 0, 0),
    Subject = "Cross-timezone Meeting",
    StartTimeZone = TimeZoneInfo.FindSystemTimeZoneById("Pacific Standard Time"),
    EndTimeZone = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time")
};

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

基本プロパティ

プロパティ	型	説明
ViewType	SchedulerViewType	ビュータイプ（Day、Week、Month、Timeline の各バリエーション）を設定します
ItemsSource	IEnumerable	予定のデータソースです
DisplayDate	DateTime	スケジューラーに現在表示されている日付です
FirstDayOfWeek	DayOfWeek	週の開始曜日です（日曜日、月曜日など）
TimeZone	TimeZoneInfo	予定を表示する際のタイムゾーンです

外観プロパティ

プロパティ	型	説明
DaysViewSettings	DaysViewSettings	Day／Week／WorkWeek ビューの設定です
TimelineViewSettings	TimelineViewSettings	Timeline ビューの設定です
MonthViewSettings	MonthViewSettings	Month ビューの設定です

リソースプロパティ

プロパティ	型	説明
ResourceCollection	ObservableCollection<SchedulerResource>	リソースのコレクションです
ResourceGroupType	ResourceGroupType	グループ化の種類です（None、Resource、Date）

予定のマッピング

プロパティ	型	説明
AppointmentMapping	AppointmentMapping	カスタムオブジェクトのプロパティを予定のプロパティにマッピングします

ビュー固有の設定

DaysViewSettings:

• TimeInterval - 時間枠の間隔（例：30 分、1 時間）
• TimeIntervalSize - 時間枠の高さ
• NonWorkingDays - 休業日として設定する曜日

TimelineViewSettings:

• TimeInterval - タイムラインの時間枠の間隔
• TimeIntervalSize - タイムラインの時間枠の幅

MonthViewSettings:

• NumberOfWeeksInView - 表示する週の数
• ShowAgendaView - アジェンダビューの表示／非表示

一般的なユースケース

1. 会議室予約システム

リソースベースのスケジューラーを作成し、ドラッグ＆ドロップで予約できる会議室の空き状況を表示します。

使用する場面： 会議室予約システムや機器スケジューリングの構築 主な機能： リソースのグループ化、ドラッグ＆ドロップ、予定の編集

2. 従業員シフトスケジューラー

色分けされたスケジュールで、複数日にわたる従業員のシフトを表示します。

使用する場面： シフト計画、人員管理、小売業のスケジューリング 主な機能： リソースのグループ化、週／月ビュー、予定のカスタムカラー

3. 医師の診療予約システム

時間枠と繰り返し予定を使用して、患者の診療予約を管理します。

使用する場面： 医療機関のスケジューリング、予約システム 主な機能： 日／週ビュー、繰り返し予定、予定の編集

4. イベントカレンダー

イベントの詳細を含むイベントを月間カレンダービューに表示します。

使用する場面： イベント管理、会議のスケジューリング、アクティビティカレンダー 主な機能： 月ビュー、終日イベント、予定のカスタムテンプレート

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

プロジェクトのマイルストーンとタスクをタイムラインビューに表示します。

使用する場面： プロジェクト管理、ガントチャート風のビュー、計画ツール 主な機能： タイムラインビュー、複数の時間枠にまたがる予定、リソースのグループ化

6. 複数タイムゾーン対応スケジューラー

グローバルチーム向けに、異なるタイムゾーンの予定を管理します。

使用する場面： リモートチームの連携、国際的なスケジューリング 主な機能： タイムゾーンのサポート、タイムゾーン変換、時刻表示

ベストプラクティス：

• 大規模な予定データセット（予定が 1000 件を超える場合）には、オンデマンド読み込みを使用します
• ObservableCollection にバインドして、UI を自動的に更新します
• カスタム予定クラスに INotifyPropertyChanged を実装します
• カスタムのビジネスオブジェクトには AppointmentMapping を使用します
• ドラッグ＆ドロップ操作中に、わかりやすい視覚的フィードバックを提供します
• 予定の種類やリソースごとに意味のある色を使用します
• アクセシビリティのためにキーボードナビゲーションを有効にします
• 一貫した外観にするため、テーマリソースを使用します
• ビジネスロジックで必要な場合は、予定の重複を検証します
• タイムゾーン変換を慎重に処理します

トラブルシューティング

予定が表示されない

• ItemsSource が正しくバインドされていることを確認します
• StartTime と EndTime が表示対象の日付範囲内であることを確認します
• ViewType が正しく設定されていることを確認します
• 予定がコレクションに追加されていることを確認します

ドラッグ＆ドロップが機能しない

• 予定が読み取り専用になっていないことを確認します
• ドラッグ＆ドロップが有効になっていることを確認します（既定で有効です）
• 対象の時間枠が予定に対して有効であることを確認します

リソースのグループ化が表示されない

• ResourceGroupType が None に設定されていないことを確認します
• ResourceCollection にデータが設定されていることを確認します
• 予定の ResourceIdCollection に正しい値が設定されていることを確認します

パフォーマンスの問題

• 大規模なデータセットにはオンデマンド読み込みを実装します
• 同時に表示する予定の数を減らします
• カスタムテンプレートを使用している場合は最適化します

次のステップ

ユーザー固有のニーズに応じて、上記のドキュメントとナビゲーションガイドセクションから適切なリファレンスファイルを案内してください。各リファレンスでは、コード例、エッジケース、トラブルシューティングを含む詳しい説明を提供しています。

WinUI コンポーネントやその他の Syncfusion コントロールに関する一般的な質問については、親スキルを参照してください：

• Syncfusion WinUI コンポーネントの実装

---

NuGet パッケージ： Syncfusion.Scheduler.WinUI
名前空間： Syncfusion.UI.Xaml.Scheduler
API リファレンス： https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Scheduler.html