Getting Started

  • 3 minutes to read

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

Refer to the Get Started tutorial for information on how to create a WinUI application and reference the DevExpress.WinUI NuGet package.

Add the SchedulerControl

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

    <Page xmlns:Scheduler="using:DevExpress.WinUI.Scheduler"
    ...
    
  2. Add the SchedulerControl.

    <Page xmlns:Scheduler="using:DevExpress.WinUI.Scheduler" 
        x:Class="Scheduler_Getting_Started.MainPage"
        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 />
    </Page>
    

Bind to Data

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

  1. Create a View Model.

    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"
            });
        }
    }
    
  2. Define data context and rebuild the application.

    <Page xmlns:Scheduler="using:DevExpress.WinUI.Scheduler" 
        x:Class="Scheduler_Getting_Started.MainPage"
        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">
        <Page.DataContext>
            <local:SchedulerViewModel/>
        </Page.DataContext>
    
    
        <Scheduler:SchedulerControl />
    </Page>
    
  3. 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.

    <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

  1. Use the SchedulerControl.Start property to specify the Scheduler's start date.

    <Scheduler:SchedulerControl Start="{Binding Start}">
    
  2. 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.

    <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>
    
  3. Access the DayView.TimeRulers collection and set a new TimeRuler. Enable the ShowMinutes and AlwaysShowTimeDesignator options for a more detailed time ruler.

    <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:

        <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>
    
  4. Run the application to see the result.