Labels in DevExpress Scheduler for .NET MAUI

Aug 09, 2022
2 minutes to read

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

The example below shows how to bind the scheduler to a collection of custom labels.

Prepare a Data Source

Add the MedicalAppointmentType class that represents a custom label.
Create an observable collection of custom label objects.
Use a custom label object to specify an appointment instance’s label.
Add a property that returns the collection of appointment labels to a view model.

Bind Scheduler to Data

In the MainPage.xaml file:

Bind the DataSource.AppointmentLabelsSource property to the view model’s AppointmentTypes property.
Use the DataSource.AppointmentLabelMappings property to map appointment label properties to the MedicalAppointmentType class properties.

XAML

xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Scheduler_GettingStarted"
            xmlns:dxsch="clr-namespace:DevExpress.Maui.Scheduler;assembly=DevExpress.Maui.Scheduler"
            x:Class="Scheduler_GettingStarted.MainPage">
    <ContentPage.BindingContext>
        <local:ReceptionDeskViewModel/>
    </ContentPage.BindingContext>
    <dxsch:WorkWeekView>
        <dxsch:WorkWeekView.DataStorage>
            <dxsch:SchedulerDataStorage x:Name="storage">
                <dxsch:SchedulerDataStorage.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:SchedulerDataStorage.DataSource>
            </dxsch:SchedulerDataStorage>
        </dxsch:WorkWeekView.DataStorage>
    </dxsch:WorkWeekView>
</ContentPage>

The scheduler applies custom colors to appointments.