Back to Devexpress

Appearance Settings in DevExpress Scheduler for .NET MAUI

maui-404030-scheduler-and-calendar-scheduler-custom-appearance.md

latest10.6 KB
Original Source

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

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

xml
<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>
csharp
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