Getting Started

• Feb 03, 2023
• 3 minutes to read

This tutorial describes how to create a Scheduler that displays appointments and allows users to manage them.

Before you proceed, review the following topics:

• Windows UI Library 3
• Get Started with WinUI 3 for Desktop Apps
• DevExpress WinUI Controls: Get Started

Create a Project

Create a new Blank App, Packaged with WAP (WinUI 3 in Desktop) project and add the DevExpress.WinUI NuGet package.

Refer to the following topic for more information on how to create a new project: DevExpress WinUI Controls: Get Started.

Add the SchedulerControl

1. Open the MainWindow.xaml. Add a reference to the DevExpress.WinUI.Scheduler namespace.

   XAML

   <Window xmlns:Scheduler="using:DevExpress.WinUI.Scheduler"
   ...
   

2. Add the SchedulerControl.

   XAML

   <Window xmlns:Scheduler="using:DevExpress.WinUI.Scheduler" 
       x:Class="Scheduler_Getting_Started.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:Scheduler_Getting_Started"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
   
       <Scheduler:SchedulerControl />
   </Window>
   

Bind to Data

You need to bind the Scheduler to data to display appointments and allow users to manage them.

3. Create a View Model.

   C#

   using System;
   using System.Collections.Generic;
   using System.Collections.ObjectModel;
   
   public class WorkAppointment {
       public long Id { get; set; }
       public bool AllDay { get; set; }
       public DateTime Start { get; set; }
       public DateTime End { get; set; }
       public int LabelId { get; set; }
       public string Subject { get; set; }
       public string Description { get; set; }
       public string Location { get; set; }
       public string RecurrenceInfo { get; set; }
   }
   public class SchedulerViewModel {
       public virtual DateTime Start { get; set; }
   
       ObservableCollection<WorkAppointment> appointments = new ObservableCollection<WorkAppointment>();
       public IEnumerable<WorkAppointment> Appointments { get { return appointments; } }
   
       public SchedulerViewModel() {
           Init();
       }
   
       void Init() {
           Start = DateTime.Today;
           appointments.Add(new WorkAppointment() {
               Start = DateTime.Now,
               End = DateTime.Now.AddHours(1),
               LabelId = 1,
               Subject = "Sample Appointment"
           });
           appointments.Add(new WorkAppointment() {
               Start = DateTime.Today,
               AllDay = true,
               LabelId = 3,
               Subject = "Sample AllDay Appointment"
           });
       }
   }
   

4. Define data context and rebuild the application.

   XAML

   <Window xmlns:Scheduler="using:DevExpress.WinUI.Scheduler" 
       x:Class="Scheduler_Getting_Started.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:Scheduler_Getting_Started"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
       <Grid>
           <Grid.DataContext>
               <local:SchedulerViewModel/>
           </Grid.DataContext>
   
           <Scheduler:SchedulerControl />
       </Grid>
   </Window>
   

5. Bind the Calendar.AppointmentsSource property of the Scheduler’s Calendar to data and specify Calendar.AppointmentMappings to map appointment properties to the data source fields.

   XAML

   <Scheduler:SchedulerControl>
       <Scheduler:Calendar AppointmentsSource="{Binding Appointments}">
           <Scheduler:Calendar.AppointmentMappings>
               <Scheduler:AppointmentMappings
                   Id="Id"
                   AllDay="AllDay"
                   Start="Start"
                   End="End"
                   LabelId="LabelId"
                   Subject="Subject"
                   Description="Description"
                   Location="Location"
                   RecurrenceRule="RecurrenceInfo">
               </Scheduler:AppointmentMappings>
           </Scheduler:Calendar.AppointmentMappings>
       </Scheduler:Calendar>
   </Scheduler:SchedulerControl>
   

Customize the Scheduler

6. Use the SchedulerControl.Start property to specify the Scheduler’s start date.

   XAML

   <Scheduler:SchedulerControl Start="{Binding Start}">
   

7. Use the SchedulerControl.Views property to limit the available views to Day View, Full Week View and Month View. Set the WeekView’s IsActive property to true to specify it as the initial view.

   XAML

   <Scheduler:SchedulerControl Start="{Binding Start}">
       <Scheduler:SchedulerControl.Views>
           <Scheduler:DayView Caption="Day View" />
           <Scheduler:WeekView Caption="Week View" IsActive="True" />
           <Scheduler:MonthView Caption="Month View" />
       </Scheduler:SchedulerControl.Views>
   

8. Access the DayView.TimeRulers collection and set a new TimeRuler. Enable the ShowMinutes and AlwaysShowTimeDesignator options for a more detailed time ruler.

   XAML

   <Scheduler:DayView Caption="Day View" >
       <Scheduler:DayView.TimeRulers>
           <Scheduler:TimeRulerCollection>
               <Scheduler:TimeRuler ShowMinutes="True" AlwaysShowTimeDesignator="True" />
           </Scheduler:TimeRulerCollection>
       </Scheduler:DayView.TimeRulers>
   </Scheduler:DayView>
   

   The XAML should look like the following:

   XAML

   <Scheduler:SchedulerControl Start="{Binding Start}">
       <Scheduler:SchedulerControl.Views>
           <Scheduler:DayView Caption="Day View" >
               <Scheduler:DayView.TimeRulers>
                   <Scheduler:TimeRulerCollection>
                       <Scheduler:TimeRuler ShowMinutes="True" AlwaysShowTimeDesignator="True" />
                   </Scheduler:TimeRulerCollection>
               </Scheduler:DayView.TimeRulers>
           </Scheduler:DayView>
           <Scheduler:WeekView Caption="Week View" IsActive="True" />
           <Scheduler:MonthView Caption="Month View" />
       </Scheduler:SchedulerControl.Views>
       <Scheduler:Calendar AppointmentsSource="{Binding Appointments}">
           <Scheduler:Calendar.AppointmentMappings>
               <Scheduler:AppointmentMappings
                   Id="Id"
                   AllDay="AllDay"
                   Start="Start"
                   End="End"
                   LabelId="LabelId"
                   Subject="Subject"
                   Description="Description"
                   Location="Location"
                   RecurrenceRule="RecurrenceInfo">
               </Scheduler:AppointmentMappings>
           </Scheduler:Calendar.AppointmentMappings>
       </Scheduler:Calendar>
   </Scheduler:SchedulerControl>
   

9. Run the application to see the result.