Change Scheduler Appearance

• Jul 08, 2019

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

View Element	Property
Cell Cell (Month View)	CellStyle, CellTemplate MonthView.CellStyle, MonthView.CellTemplate
Appointment	AppointmentStyle, AppointmentTemplate MonthView.AppointmentStyle, MonthView.AppointmentTemplate
Header Item Header Item (Month View)	HeaderItemStyle, HeaderItemTemplate MonthView.HeaderItemStyle, MonthView.HeaderItemTemplate
All-Day Area	AllDayCellStyle, AllDayCellTemplate AllDayAppointmentStyle, AllDayAppointmentTemplate
Time Ruler	TimeRulerHeaderStyle, TimeRulerHeaderTemplate TimeRulerCellStyle, 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="http://schemas.devexpress.com/xamarin/2014/forms/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.HeaderItemStyle>
            <dxsch:DayViewHeaderItemStyle BackgroundColor="#dce0ec" 
                                          TodayDayNumberBackgroundColor="#fff7c2"
                                          TodayDayNumberTextStyle="{StaticResource redText}"
                                          TodayWeekDayTextStyle="{StaticResource redText}"/>
        </dxsch:WorkWeekView.HeaderItemStyle>

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

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

        <!--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.XamarinForms.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");
        }
    }
}