Custom Calendar Style WPF

Introduction

This tip is all about that how to change default style and size of calander in wpf.

Using the code

It's very simple to change default style of calendar in wpf by creating our own custom style.

We need to create style for Calendar like below-

<Style x:Key="StyleCalanderDayButton" TargetType="{x:Type CalendarDayButton}">

        <Setter Property="Height" Value="40"></Setter>

        <Setter Property="Width" Value="40"></Setter>

    </Style>

    <Style x:Key="StyleCalanderButton" TargetType="{x:Type CalendarButton}">

        <Setter Property="Height" Value="60"></Setter>

        <Setter Property="Width" Value="60"></Setter>

        <Setter Property="FontWeight" Value="Normal"/>

        <Setter Property="FontSize" Value="18" />

    </Style>

    <Style x:Key="StyleCalendar" TargetType="{x:Type Calendar}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Calendar}">

                    <!-- Wrapping in ViewBox will enlarge calendar of that size.-->

                    <Viewbox Height="400" Width="400" >



                        <CalendarItem x:Name="PART_CalendarItem" 

                                  Background="{TemplateBinding Background}"

                                  BorderBrush="{TemplateBinding BorderBrush}"

                                  BorderThickness="{TemplateBinding BorderThickness}" FontStretch="Expanded"  >



                        </CalendarItem>

                    </Viewbox>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

        <Setter Property="CalendarDayButtonStyle"  Value="{StaticResource StyleCalanderDayButton}"></Setter>

        <Setter Property="CalendarButtonStyle"  Value="{StaticResource StyleCalanderButton}"></Setter>

        <Setter Property="Foreground" Value="#FF333333"/>

        <Setter Property="Background">

            <Setter.Value>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#089bd6" Offset="0"/>

                    <GradientStop Color="#9ce1fc" Offset="0.1"/>

                    <GradientStop Color="#9ce1fc" Offset="0.1"/>

                    <GradientStop Color="#20bcf9" Offset="1"/>

                </LinearGradientBrush>

            </Setter.Value>

        </Setter>

        <Setter Property="BorderThickness" Value="0"/>

    </Style>

In above style, 'StyleCalendar' is main style which is using two sub styles - 'StyleCalanderDayButton' style is used to change style of day buttons and 'StyleCalanderButton' used to change style of other buttons of calendar.

Now, we can use this style with calendar like as -

Style="{StaticResource StyleCalendar}"

We can also use above style inside datepicker for Calander like as- 

 CalendarStyle="{StaticResource StyleCalendar}"

You can modify this style as needed.