Lesson 1: Bind Scheduler to Data

• Apr 04, 2019
• 3 minutes to read

This tutorial explains how to associate a SchedulerView instance with a data source that stores appointments.

Create a New Application and Add a Scheduler

1. Create a new Xamarin.Forms cross-platform solution and include the DevExpress SchedulerView component.

2. In the MainPage.xaml file of the .NET Standard project containing the shared code, use the dxsch prefix to declare a namespace and add a SchedulerView to a content page:

   Xaml

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:dxsch="clr-namespace:DevExpress.XamarinForms.Scheduler;assembly=DevExpress.XamarinForms.Scheduler"
               xmlns:local="clr-namespace:SchedulerExample"
               x:Class="SchedulerExample.MainPage">
       <dxsch:SchedulerView x:Name="scheduler">
       </dxsch:SchedulerView>
   </ContentPage>
   

Prepare a Data Source

1. Add the following classes that represent data objects in the application:

   • MedicalAppointment - An appointment (activity scheduled for a specific time interval) that should be rendered in the scheduler.
   • ReceptionDeskData - A data source that holds data for the scheduler. The MedicalAppointments property provides access to appointments.
   C#

   using System;
   using System.Collections.ObjectModel;
   using Xamarin.Forms;
   
   namespace SchedulerExample.Models {
       public class MedicalAppointment {
           public int Id { get; set; }
           public DateTime StartTime { get; set; }
           public DateTime EndTime { get; set; }
           public string Subject { get; set; }
           public int LabelId { get; set; }
           public string Location { get; set; }
       }
   
       public class ReceptionDeskData {
           public static DateTime BaseDate = DateTime.Today;
   
           public static string[] PatientNames = { "Andrew Glover", "Mark Oliver", "Taylor Riley",
                                                   "Addison Davis", "Benjamin Hughes", "Lucas Smith",
                                                   "Robert King", "Laura Callahan", "Miguel Simmons",
                                                   "Isabella Carter", "Andrew Fuller", "Madeleine Russell",
                                                   "Steven Buchanan", "Nancy Davolio", "Michael Suyama",
                                                   "Margaret Peacock", "Janet Leverling", "Ariana Alexander",
                                                   "Brad Farkus", "Bart Arnaz", "Arnie Schwartz", "Billy Zimmer"};
   
           static Random rnd = new Random();
   
           void CreateMedicalAppointments() {
               int appointmentId = 1;
               int patientIndex = 0;
               DateTime start;
               TimeSpan duration;
               ObservableCollection<MedicalAppointment> result = new ObservableCollection<MedicalAppointment>();
               for (int i = -20; i < 20; i++)
                   for (int j = 0; j < 20; j++) {
                       int room = rnd.Next(1, 100);
                       start = BaseDate.AddDays(i).AddHours(rnd.Next(8, 17)).AddMinutes(rnd.Next(0, 40));
                       duration = TimeSpan.FromMinutes(rnd.Next(15, 20));
                       result.Add(CreateMedicAppointment(appointmentId, PatientNames[patientIndex],
                                                       start, duration, room));
                       appointmentId++;
                       patientIndex++;
                       if (patientIndex >= PatientNames.Length - 1)
                           patientIndex = 1;
                   }
               MedicalAppointments = result;
           }
   
           MedicalAppointment CreateMedicAppointment(int appointmentId, string patientName,
                                                       DateTime start, TimeSpan duration, int room) {
               MedicalAppointment medicalAppointment = new MedicalAppointment();
               medicalAppointment.Id = appointmentId;
               medicalAppointment.StartTime = start;
               medicalAppointment.EndTime = start.Add(duration);
               medicalAppointment.Subject = patientName;
               medicalAppointment.LabelId = rnd.Next(1, 10); // Assign one of the predefined labels to an appointment
               medicalAppointment.Location = String.Format("{0}", room);
               return medicalAppointment;
           }
   
           public ObservableCollection<MedicalAppointment> MedicalAppointments { get; private set; }
   
           public ReceptionDeskData() {
               CreateMedicalAppointments();
           }
       }
   }
   

2. Create the ReceptionDeskViewModel class that provides content the scheduler should display.

   C#

   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using SchedulerExample.Models;
   
   namespace SchedulerExample.ViewModels {
       public class ReceptionDeskViewModel : INotifyPropertyChanged {
           readonly ReceptionDeskData data;
   
           public event PropertyChangedEventHandler PropertyChanged;
           public DateTime StartDate { get { return ReceptionDeskData.BaseDate; } }
           public IReadOnlyList<MedicalAppointment> MedicalAppointments { get => data.MedicalAppointments; }
   
           public ReceptionDeskViewModel() {
               data = new ReceptionDeskData();
           }
   
           protected void RaisePropertyChanged(string name) {
               if (PropertyChanged != null)
                   PropertyChanged(this, new PropertyChangedEventArgs(name));
           }
       }
   }
   

Bind Scheduler to Data

In the MainPage.xaml file:

1. Assign the ReceptionDeskViewModel object to the content page’s BindingContext property.
2. Set the DataSource.AppointmentsSource property to the collection of appointment objects.

3. Use the DataSource.AppointmentMappings property to map appointment properties to the MedicalAppointment class properties.

   XAML

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:local="clr-namespace:SchedulerExample"
               xmlns:dxsch="clr-namespace:DevExpress.XamarinForms.Scheduler;assembly=DevExpress.XamarinForms.Scheduler"
               xmlns:vm="clr-namespace:SchedulerExample.ViewModels"
               x:Class="SchedulerExample.MainPage">
       <ContentPage.BindingContext>
           <vm:ReceptionDeskViewModel/>
       </ContentPage.BindingContext>
       <dxsch:SchedulerView x:Name="scheduler">
           <dxsch:SchedulerView.DataSource>
               <dxsch:DataSource AppointmentsSource="{Binding MedicalAppointments}">
                   <dxsch:DataSource.AppointmentMappings>
                       <dxsch:AppointmentMappings 
                               Id="Id" 
                               Start="StartTime" 
                               End="EndTime" 
                               Subject="Subject"
                               LabelId="LabelId"
                               Location="Location"/>
                   </dxsch:DataSource.AppointmentMappings>
               </dxsch:DataSource>
           </dxsch:SchedulerView.DataSource>
       </dxsch:SchedulerView>
   </ContentPage>
   

The scheduler displays appointments in a day view with default settings.

The next lesson explains how to set up the scheduler so that it displays data in a work week view, and how to adjust view settings.