Appearance Settings in DevExpress Scheduler for .NET MAUI

• Nov 11, 2022
• 2 minutes to read

A scheduler view object includes the following properties that you can use to customize the appearance of view elements:

View Element	Property
Cell Cell (Month View)	CellAppearance, CellTemplate MonthView.CellAppearance, MonthView.CellTemplate
Appointment	AppointmentAppearance, AppointmentTemplate MonthView.AppointmentAppearance, MonthView.AppointmentTemplate
Header Item Header Item (Month View)	HeaderItemAppearance, HeaderItemTemplate MonthView.HeaderItemAppearance, MonthView.HeaderItemTemplate
All-Day Area	AllDayCellAppearance, AllDayCellTemplate AllDayAppointmentAppearance, AllDayAppointmentTemplate
Time Ruler	TimeRulerHeaderAppearance, TimeRulerHeaderTemplate TimeRulerCellAppearance, TimeRulerCellTemplate

This example shows how to change the work week view appearance.

View Example

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.Maui.Scheduler;assembly=DevExpress.Maui.Scheduler"
             x:Class="SchedulerExample.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <dxsch:TextStyle x:Key="redText" Color="red"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <dxsch:WorkWeekView>
        <dxsch:WorkWeekView.DataStorage>
            <!-- ... -->
        </dxsch:WorkWeekView.DataStorage>

        <!--Customize the date header appearance.-->
        <dxsch:WorkWeekView.HeaderItemAppearance>
            <dxsch:DayViewHeaderItemAppearance BackgroundColor="#dce0ec" 
                                          TodayDayNumberBackgroundColor="#fff7c2"
                                          TodayDayNumberTextStyle="{StaticResource redText}"
                                          TodayWeekDayTextStyle="{StaticResource redText}"/>
        </dxsch:WorkWeekView.HeaderItemAppearance>

        <!--Customize the time ruler appearance.-->
        <dxsch:WorkWeekView.TimeRulerCellAppearance>
            <dxsch:TimeRulerCellAppearance BackgroundColor="#dce0ec" 
                                      IntervalTickColor="#8e9bbc" IntervalTickLength="15"
                                      SlotTickColor="#8e9bbc" SlotTickLength="7"/>
        </dxsch:WorkWeekView.TimeRulerCellAppearance>
        <dxsch:WorkWeekView.TimeRulerHeaderAppearance>
            <dxsch:TimeRulerHeaderAppearance BackgroundColor="#dce0ec"/>
        </dxsch:WorkWeekView.TimeRulerHeaderAppearance>

        <!--Customize the all-day area appearance.-->
        <dxsch:WorkWeekView.AllDayCellAppearance>
            <dxsch:AllDayAreaCellStyle BackgroundColor="#f1f1f1" 
                                       TodayBackgroundColor="#fff7c2"/>
        </dxsch:WorkWeekView.AllDayCellAppearance>

        <!--Customize the cell appearance.-->
        <dxsch:WorkWeekView.CellStyle>
            <dxsch:DayViewCellStyle WorkTimeBackgroundColor="White"
                                    BackgroundColor="#f1f1f1"
                                    TodayBackgroundColor="#fff7c2"
                                    BorderColor="#bdbdbd"
                                    SlotBorderColor="#e1e1e1">
                <dxsch:DayViewCellStyle.Customizer>
                    <local:WorkWeekViewCellCustomizer/>
                </dxsch:DayViewCellStyle.Customizer>
            </dxsch:DayViewCellStyle>
        </dxsch:WorkWeekView.CellStyle>
    </dxsch:WorkWeekView>
</ContentPage>

C#

using DevExpress.Maui.Scheduler;
// ...

class WorkWeekViewCellCustomizer : IDayViewCellCustomizer {
    public void Customize(DayViewCellViewModel cell) {
        if (cell.Interval.Start.Hour < DateTime.Now.Hour 
            && cell.Interval.Start.Date == DateTime.Today) {
            cell.BackgroundColor = Color.FromHex("#fbf7e0");
        }
    }
}

Use a Customizer Object

The following Scheduler views include the Customizer objects that allow you to customize their appearance:

Control	Customizer Object
Scheduler.DayView	AppointmentAppearance.Customizer AllDayAreaCellAppearance.Customizer DayViewCellAppearance.Customizer DayViewHeaderItemAppearance.Customizer TimeRulerCellAppearance.Customizer
Scheduler.WeekView	AppointmentAppearance.Customizer AllDayAreaCellAppearance.Customizer DayViewCellAppearance.Customizer DayViewHeaderItemAppearance.Customizer TimeRulerCellAppearance.Customizer
Scheduler.WorkWeekView	AppointmentAppearance.Customizer AllDayAreaCellAppearance.Customizer DayViewCellAppearance.Customizer DayViewHeaderItemAppearance.Customizer TimeRulerCellAppearance.Customizer
Scheduler.MonthView	AppointmentAppearance.Customizer AllDayAreaCellAppearance.Customizer DayViewCellAppearance.Customizer DayViewHeaderItemAppearance.Customizer TimeRulerCellAppearance.Customizer AppointmentAppearance MonthViewCellAppearance.Customizer MonthViewHeaderItemAppearance.Customizer

Example

The following code sample uses the month view’s customizer object to modify the header item’s appearance:

XAML

<ContentPage ...
           xmlns:dxsch="clr-namespace:DevExpress.Maui.Scheduler;assembly=DevExpress.Maui.Scheduler"
           xmlns:local="clr-namespace:SchedulerCustomAppearance">
  <dxsch:MonthView>
      <!-- ... -->
      <dxsch:MonthView.HeaderItemAppearance>
          <dxsch:MonthViewHeaderItemAppearance>
              <dxsch:MonthViewHeaderItemAppearance.Customizer>
                  <local:MonthViewHeaderItemCustomizer/>
              </dxsch:MonthViewHeaderItemAppearance.Customizer>
          </dxsch:MonthViewHeaderItemAppearance>
      </dxsch:MonthView.HeaderItemAppearance>
  </dxsch:MonthView>
</ContentPage>

C#

class MonthViewHeaderItemCustomizer : IMonthViewHeaderItemCustomizer {
    public void Customize(MonthViewHeaderItemViewModel header) {
        if (header.IsToday) {
            var tmp = header.BackgroundColor;
            header.BackgroundColor = header.WeekDayTextColor;
            header.WeekDayTextColor = tmp;
        }
    }
}

View Example: DevExpress Scheduler for .NET MAUI - Custom Appearance