Skip to main content

Change Scheduler Appearance

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

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

Scheduler Custom Appearance