Appearance in WPF Calendar (CalendarEdit)

18 Nov 20183 minutes to read

This section explains different styling, theming options available in CalendarEdit control.

Setting the foreground

You can change the default foreground, mouse hover foreground and border brush of the CalendarEdit by using the Foreground, MouseOverForeground and MouseOverBorderBrush properties. The default value of Foreground is Dark SlateGray and MouseOverForeground is Black.

XAML

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Foreground="Blue"
                         MouseOverForeground="Red"
                         MouseOverBorderBrush="DarkGoldenrod"
                         Name="calendarEdit" />
</Window>

C#

using Syncfusion.Windows.Shared;

this.calendarEdit.Foreground = Brushes.Blue;
this.calendarEdit.MouseOverForeground = Brushes.Red;
this.calendarEdit.MouseOverBorderBrush = Brushes.DarkGoldenrod;

NOTE

View Sample in GitHub

Setting the background

You can change the default background and mouse hover background color of the CalendarEdit by using the Background and MouseOverBackground properties. The default value of Background is White and MouseOverBackground is Lavender.

XAML

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit Background="Pink"
                         MouseOverBackground="Green"
                         Name="calendarEdit" />
</Window>

C#

using Syncfusion.Windows.Shared;

this.calendarEdit.Background = Brushes.Pink;
this.calendarEdit.MouseOverBackground = Brushes.Green;

NOTE

View Sample in GitHub

Change flow direction

You can change the flow direction of the CalendarEdit layout from right to left by setting the FlowDirection property value as RightToLeft. The default value of FlowDirection property is LeftToRight.

XAML

<Window 
    . . .
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:CalendarEdit FlowDirection="RightToLeft"
                         Name="calendarEdit" />
</Window>

C#

using Syncfusion.Windows.Shared;

this.calendarEdit.FlowDirection = FlowDirection.RightToLeft;

NOTE

View Sample in GitHub

Theme

CalendarEdit supports various built-in themes. Refer to the below links to apply themes for the CalendarEdit,

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio