A newer version of this page is available. Switch to the current version.

Lesson 4: Create Custom Labels

  • 3 min to read

A label specifies the background color of an appointment's rectangle. Users can assign labels to appointments to categorize and identify them. SchedulerView provides a set of predefined labels, but you can replace them with custom labels.

Open the solution created in Lesson 2 and follow the steps below to bind the scheduler to a collection of custom labels.

Prepare a Data Source

  1. Add the MedicalAppointmentType class that represents a custom label.
  2. Create an observable collection of custom label objects.
  3. Use a custom label object to specify an appointment instance's label.

    using Xamarin.Forms;
    // ...
    
    namespace SchedulerExample.Models {
        // ... 
    
        public class MedicalAppointmentType {
            public int Id { get; set; }
            public string Caption { get; set; }
            public Color Color { get; set; }
        }
    
        public class ReceptionDeskData {
            // ...
    
            public static string[] AppointmentTypes = { "Hospital", "Office", "Phone Consultation", "Home", "Hospice" };
            public static Color[] AppointmentTypeColors = { Color.FromHex("#9c63ff"), Color.FromHex("#64c064"),
                                                        Color.FromHex("#eead51"), Color.FromHex("#d2504b"),
                                                        Color.FromHex("#4b6bbf") };
    
            void CreateLabels() {
                ObservableCollection<MedicalAppointmentType> result = new ObservableCollection<MedicalAppointmentType>();
                int count = AppointmentTypes.Length;
                for (int i = 0; i < count; i++) {
                    MedicalAppointmentType appointmentType = new MedicalAppointmentType();
                    appointmentType.Id = i;
                    appointmentType.Caption = AppointmentTypes[i];
                    appointmentType.Color = AppointmentTypeColors[i];
                    result.Add(appointmentType);
                }
                Labels = 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 = Labels[rnd.Next(0, 5)].Id; // Assign a custom label to an appointment
                if (medicalAppointment.LabelId != 3)
                    medicalAppointment.Location = String.Format("{0}", room);
                medicalAppointment.Location = String.Format("{0}", room);
                return medicalAppointment;
            }
    
            // ...
            public ObservableCollection<MedicalAppointmentType> Labels { get; private set; }
    
            public ReceptionDeskData() {
                CreateLabels();
                // ...
            }
        }
    }
    
  4. Add a property that returns the collection of appointment labels to a view model.

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using SchedulerExample.Models;
    
    namespace SchedulerExample.ViewModels {
        public class ReceptionDeskViewModel : INotifyPropertyChanged {
            // ...
            public IReadOnlyList<MedicalAppointmentType> AppointmentTypes { get => data.Labels; }
    
            public ReceptionDeskViewModel() {
                data = new ReceptionDeskData();
            }
            // ...
        }
    }
    

Bind Scheduler to Data

In the MainPage.xaml file:

  1. Bind the DataSource.AppointmentLabelsSource property to the view model's AppointmentTypes property.
  2. Use the DataSource.AppointmentLabelMappings property to map appointment label properties to the MedicalAppointmentType class properties.
<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}"
                              AppointmentLabelsSource="{Binding AppointmentTypes}">
                <!-- ... -->
                <dxsch:DataSource.AppointmentLabelMappings>
                <dxsch:AppointmentLabelMappings
                        Caption="Caption"
                        Color="Color"
                        Id="Id"/>
            </dxsch:DataSource.AppointmentLabelMappings>
            </dxsch:DataSource>
        </dxsch:SchedulerView.DataSource>
    </dxsch:SchedulerView>
</ContentPage>

The scheduler applies custom colors to appointments.

Custom Labels