How to load appointments on demand in wpf scheduler

About the sample

This examples demonstrates to load appointment on demand in wpf scheduler on two ways.

• LoadOnDemandEvent(QueryAppointments)
• LoadOnDemandCommand

LoadOnDemandEvent(QueryAppointments)

Define a Behavior class for sheduler that implements QueryAppointments event for on-demand loading.

public class LoadOnDemandBehavior : Behavior { SfScheduler scheduler; protected override void OnAttached() { this.scheduler = this.AssociatedObject; this.scheduler.QueryAppointments += OnSchedulerQueryAppointments; }

    private async void OnSchedulerQueryAppointments(object sender, QueryAppointmentsEventArgs e)
    {
        this.scheduler.ShowBusyIndicator = true;
        await Task.Delay(1000);
        await this.Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action(() =>
        {
            this.scheduler.ItemsSource = this.GenerateSchedulerAppointments(e.VisibleDateRange);
        }));
        this.scheduler.ShowBusyIndicator = false;
    }


    /// <summary>
    /// Method to generate scheduler appointments based on current visible date range.
    /// </summary>
    /// <param name="dateRange">Current visible date range.</param>
    private IEnumerable GenerateSchedulerAppointments(DateRange dateRange)
    {
        var brush = new ObservableCollection<SolidColorBrush>();
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xA2, 0xC1, 0x39)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xD8, 0x00, 0x73)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x1B, 0xA1, 0xE2)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xE6, 0x71, 0xB8)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xF0, 0x96, 0x09)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x33, 0x99, 0x33)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0xAB, 0xA9)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xE6, 0x71, 0xB8)));

        var subjectCollection = new ObservableCollection<string>();
        subjectCollection.Add("Business Meeting");
        subjectCollection.Add("Conference");
        subjectCollection.Add("Medical check up");
        subjectCollection.Add("Performance Check");
        subjectCollection.Add("Consulting");
        subjectCollection.Add("Project Status Discussion");
        subjectCollection.Add("Client Meeting");
        subjectCollection.Add("General Meeting");
        subjectCollection.Add("Yoga Therapy");
        subjectCollection.Add("GoToMeeting");
        subjectCollection.Add("Plan Execution");
        subjectCollection.Add("Project Plan");

        Random ran = new Random();
        int daysCount = (dateRange.ActualEndDate - dateRange.ActualStartDate).Days;
        var appointments = new ObservableCollection<SchedulerModel>();
        for (int i = 0; i < 50; i++)
        {
            var startTime = dateRange.ActualStartDate.AddDays(ran.Next(0, daysCount + 1)).AddHours(ran.Next(0, 24));
            appointments.Add(new SchedulerModel
            {
                From = startTime,
                To = startTime.AddHours(1),
                EventName = subjectCollection[ran.Next(0, subjectCollection.Count)],
                Color = brush[ran.Next(0, brush.Count)],
            });
        }

        return appointments;
    }

    protected override void OnDetaching()
    {
        this.scheduler.QueryAppointments -= OnSchedulerQueryAppointments;
        this.scheduler = null;
    }
}

And called the LoadOnDemandBehavior class to scheduler control.

<Window.Resources>
    <ObjectDataProvider x:Key="schedulerviewtypes" MethodName="GetValues"
                        ObjectType="{x:Type system:Enum}">
        <ObjectDataProvider.MethodParameters>
            <x:Type  Type="{x:Type syncfusion:SchedulerViewType}"/>
        </ObjectDataProvider.MethodParameters>
    </ObjectDataProvider>
</Window.Resources>
<Grid>
    <syncfusion:SfScheduler x:Name="scheduler"
                          ViewType="{Binding ElementName=schedulerViewType, Path=SelectedValue}">
        <syncfusion:SfScheduler.AppointmentMapping>
            <syncfusion:AppointmentMapping
                Subject="EventName"
                StartTime="From"
                EndTime="To"
                AppointmentBackground="Color"/>
        </syncfusion:SfScheduler.AppointmentMapping>
        <interactivity:Interaction.Behaviors>
            <local:LoadOnDemandBehavior />
        </interactivity:Interaction.Behaviors>
    </syncfusion:SfScheduler>
          <StackPanel
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Margin="0,4,8,0">
        <ComboBox x:Name="viewtypecombobox" 
                  ItemsSource="{Binding Source={StaticResource schedulerviewtypes}}"
                  SelectedIndex="2" 
                  SelectionChanged="Viewtypecombobox_SelectionChanged"  
                  Width="150" Height="24"
                  VerticalAlignment="Center"/>
    </StackPanel>
</Grid>

LoadOnDemandCommand

Define a ViewModel class that implements Command and handle it by CanExecute and Execute methods to check and execute on-demand loading.

public class LoadOnDemandViewModel : NotificationObject
{
    /// <summary>
    /// Gets or Sets event collection.
    /// </summary>
    private IEnumerable events;

    /// <summary>
    /// Gets or sets a value indicating whether to show the busy indicator.
    /// </summary>
    private bool showBusyIndicator;

    /// <summary>
    /// Gets or sets load on demand command.
    /// </summary>
    public ICommand LoadOnDemandCommand { get; set; }

    /// <summary>
    /// Gets or sets event collection.
    /// </summary>
    public IEnumerable Events
    {
        get { return events; }
        set
        {
            events = value;
            this.RaisePropertyChanged("Events");
        }
    }

    /// <summary>
    /// Gets or sets a value indicating whether to show the busy indicator.
    /// </summary>
    public bool ShowBusyIndicator
    {
        get { return showBusyIndicator; }
        set
        {
            showBusyIndicator = value;
            this.RaisePropertyChanged("ShowBusyIndicator");
        }
    }

    /// <summary>
    /// Initializes a new instance of the <see cref="LoadOnDemandViewModel" /> class.
    /// </summary>
    public LoadOnDemandViewModel()
    {
        if (!DesignerProperties.GetIsInDesignMode(new DependencyObject()))
        {
            this.LoadOnDemandCommand = new DelegateCommand(ExecuteOnDemandLoading, CanExecuteOnDemandLoading);
        }
    }

    /// <summary>
    /// Method to excute load on demand command and set scheduler appointments.
    /// </summary>
    /// <param name="parameter">QueryAppointmentsEventArgs object.</param>
    public async void ExecuteOnDemandLoading(object parameter)
    {
        if (parameter == null)
        {
            return;
        }

        this.ShowBusyIndicator = true;
        await Task.Delay(500);
        await Application.Current.MainWindow.Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action(() =>
        {
            this.Events = this.GenerateSchedulerAppointments((parameter as QueryAppointmentsEventArgs).VisibleDateRange);
        }));
        this.ShowBusyIndicator = false;
    }

    /// <summary>
    /// Method to check whether the load on demand command can be invoked or not.
    /// </summary>
    /// <param name="sender">QueryAppointmentsEventArgs object.</param>
    private bool CanExecuteOnDemandLoading(object sender)
    {
        return true;
    }

    /// <summary>
    /// Method to generate scheduler appointments based on current visible date range.
    /// </summary>
    /// <param name="dateRange">Current visible date range.</param>
    private IEnumerable GenerateSchedulerAppointments(DateRange dateRange)
    {
        var brush = new ObservableCollection<SolidColorBrush>();
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xA2, 0xC1, 0x39)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xD8, 0x00, 0x73)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x1B, 0xA1, 0xE2)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xE6, 0x71, 0xB8)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xF0, 0x96, 0x09)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x33, 0x99, 0x33)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0xAB, 0xA9)));
        brush.Add(new SolidColorBrush(Color.FromArgb(0xFF, 0xE6, 0x71, 0xB8)));

        var subjectCollection = new ObservableCollection<string>();
        subjectCollection.Add("Business Meeting");
        subjectCollection.Add("Conference");
        subjectCollection.Add("Medical check up");
        subjectCollection.Add("Performance Check");
        subjectCollection.Add("Consulting");
        subjectCollection.Add("Project Status Discussion");
        subjectCollection.Add("Client Meeting");
        subjectCollection.Add("General Meeting");
        subjectCollection.Add("Yoga Therapy");
        subjectCollection.Add("GoToMeeting");
        subjectCollection.Add("Plan Execution");
        subjectCollection.Add("Project Plan");

        Random ran = new Random();
        int daysCount = (dateRange.ActualEndDate - dateRange.ActualStartDate).Days;
        var appointments = new ObservableCollection<SchedulerModel>();
        for (int i = 0; i < 50; i++)
        {
            var startTime = dateRange.ActualStartDate.AddDays(ran.Next(0, daysCount + 1)).AddHours(ran.Next(0, 24));
            appointments.Add(new SchedulerModel
            {
                From = startTime,
                To = startTime.AddHours(1),
                EventName = subjectCollection[ran.Next(0, subjectCollection.Count)],
                Color = brush[ran.Next(0, brush.Count)],
            });
        }

        return appointments;
    }
}

And set the ICommand to LoadOnDemandCommand property of scheduler.

<Window.Resources>
    <ObjectDataProvider x:Key="schedulerviewtypes" MethodName="GetValues"
                        ObjectType="{x:Type system:Enum}">
        <ObjectDataProvider.MethodParameters>
            <x:Type  Type="{x:Type syncfusion:SchedulerViewType}"/>
        </ObjectDataProvider.MethodParameters>
    </ObjectDataProvider>
</Window.Resources>
<Window.DataContext>
    <local:LoadOnDemandViewModel/>
</Window.DataContext>
<Grid>
    <syncfusion:SfScheduler x:Name="scheduler" 
                          ViewType="{Binding ElementName=viewtypecombobox, Path=SelectedValue}" 
                          ItemsSource="{Binding Events}"
                          ShowBusyIndicator="{Binding ShowBusyIndicator}"
                          LoadOnDemandCommand="{Binding LoadOnDemandCommand}">
        <syncfusion:SfScheduler.AppointmentMapping>
            <syncfusion:AppointmentMapping
            Subject="EventName"
            StartTime="From"
            EndTime="To"
            AppointmentBackground="Color"/>
        </syncfusion:SfScheduler.AppointmentMapping>
    </syncfusion:SfScheduler>
          <StackPanel
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Margin="0,4,8,0">
        <ComboBox x:Name="viewtypecombobox" 
                  ItemsSource="{Binding Source={StaticResource schedulerviewtypes}}"
                  SelectedIndex="2" 
                  SelectionChanged="Viewtypecombobox_SelectionChanged"  
                  Width="150" Height="24"
                  VerticalAlignment="Center"/>
    </StackPanel>
</Grid>