I want to custom my own calendar style. I have searched on internet and I have got the following example:

```
<Style x:Key="PlaybackCalendarItemStyle" TargetType="primitives:CalendarItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="primitives:CalendarItem">
                <ControlTemplate.Resources>
                    <!-- Start: Data template for header button -->
                    <DataTemplate x:Key="DayTitleTemplate">
                        <TextBlock
                                            FontWeight="Bold" 
                                            FontFamily="Verdana" 
                                            FontSize="9.5" 
                                            Foreground="#FF333333" 
                                            HorizontalAlignment="Center"
                                            Text="{Binding}"
                                            Margin="0,6,0,6"
                                            VerticalAlignment="Center"/>
                    </DataTemplate>
                    <!-- End: Data template for header button -->
                </ControlTemplate.Resources>
                <Grid Name="PART_Root" >
                    <Grid.Resources>
                        <SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF" />
                    </Grid.Resources>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <Border 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            CornerRadius="1">

                        <!-- This Brush is new -->
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
                                <GradientStop Offset="0"   Color="#FFFFC0" />
                                <GradientStop Offset="0.5" Color="#FFE0B0" />
                                <GradientStop Offset="1"   Color="#FFD0A8" />
                            </LinearGradientBrush>
                        </Border.Background>

                        <Border CornerRadius="1" BorderBrush="#FFFFFFFF" BorderThickness="2">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <Grid.Resources>
                                    <!-- Start: Previous button template -->
                                    <ControlTemplate x:Key="PreviousButtonTemplate" TargetType="Button">
                                        <Grid Cursor="Hand">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal" />
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>
                                            <Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
                                            <Grid>
                                                <Path Margin="14,-6,0,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z">
                                                    <Path.Fill>
                                                        <SolidColorBrush x:Name="TextColor" Color="#FF333333" />
                                                    </Path.Fill>
                                                </Path>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>

                                    <!-- End: Previous button template -->

                                    <!-- Start: Next button template -->
                                    <ControlTemplate x:Key="NextButtonTemplate" TargetType="Button">
                                        <Grid Cursor="Hand">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal" />
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>
                                            <Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
                                            <Grid>
                                                <Path Margin="0,-6,14,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Right" Stretch="Fill" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z">
                                                    <Path.Fill>
                                                        <SolidColorBrush x:Name="TextColor" Color="#FF333333" />
                                                    </Path.Fill>
                                                </Path>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>

                                    <!-- End: Next button template -->

                                    <!-- Start: Header button template -->
                                    <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                                        <Grid Cursor="Hand">
                                            <vsm:VisualStateManager.VisualStateGroups>
                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                    <vsm:VisualState x:Name="Normal" />
                                                    <vsm:VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                    <vsm:VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                        </Storyboard>
                                                    </vsm:VisualState>
                                                </vsm:VisualStateGroup>
                                            </vsm:VisualStateManager.VisualStateGroups>

                                            <!-- This Border is new -->
                                            <Border Padding="12 0"
                                                        CornerRadius="6">
                                                <Border.Background>
                                                    <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
                                                        <GradientStop Offset="0" Color="#FFC4A0" />
                                                        <GradientStop Offset="1" Color="#FF9450" />
                                                    </LinearGradientBrush>
                                                </Border.Background>

                                                <ContentPresenter
                                                    x:Name="buttonContent"
                                                    Content="{TemplateBinding Content}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                                    Margin="1,4,1,9"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                    <TextElement.Foreground>
                                                        <SolidColorBrush x:Name="TextColor" Color="#FF333333"/>
                                                    </TextElement.Foreground>
                                                </ContentPresenter>
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                    <!-- End: Header button template -->

                                </Grid.Resources>

                                <!-- Start: Previous button content -->
                                <Button x:Name="PART_PreviousButton" 
                                        Grid.Row="0" Grid.Column="0"
                                        Template="{StaticResource PreviousButtonTemplate}" 
                                        Height="20" Width="28" 
                                        HorizontalAlignment="Left" 
                                        Focusable="False"
                                        />
                                <!-- End: Previous button content -->

                                <!-- Start: Header button content -->
                                <Button x:Name="PART_HeaderButton"                                             
                                        Grid.Row="0" Grid.Column="1" 
                                        Template="{StaticResource HeaderButtonTemplate}" 
                                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                                        FontWeight="Bold" FontSize="10.5" 
                                        Focusable="False"
                                        />
                                <!-- End: Header button content -->

                                <!-- Start: Next button content -->
                                <Button x:Name="PART_NextButton" 
                                        Grid.Row="0" Grid.Column="2" 
                                        Height="20" Width="28" 
                                        HorizontalAlignment="Right" 
                                        Template="{StaticResource NextButtonTemplate}" 
                                        Focusable="False"
                                        />
                                <!-- End: Next button content -->

                                <!-- Start: Month Content Grid -->
                                <Grid x:Name="PART_MonthView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Visible" Margin="6,-1,6,6">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                </Grid>
                                <!-- End: Month Content Grid -->

                                <!-- End: Year Content Grid -->
                                <Grid x:Name="PART_YearView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Hidden" Margin="6,-3,7,6">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                </Grid>
                                <!-- End: Year Content Grid -->
                            </Grid>
                        </Border>
                    </Border>
                    <Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Stretch="Fill" StrokeThickness="1" RadiusX="2" RadiusY="2" Stroke="{StaticResource DisabledColor}" Fill="{StaticResource DisabledColor}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <DataTrigger Value="Year">
                        <DataTrigger.Binding>
                            <Binding Path="DisplayMode">
                                <Binding.RelativeSource>
                                    <RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
                                </Binding.RelativeSource>
                            </Binding>
                        </DataTrigger.Binding>
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                    <DataTrigger Value="Decade">
                        <DataTrigger.Binding>
                            <Binding Path="DisplayMode">
                                <Binding.RelativeSource>
                                    <RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
                                </Binding.RelativeSource>
                            </Binding>
                        </DataTrigger.Binding>
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

```

The result of this example is the following image 

![enter image description here](https://i.stack.imgur.com/WXkoz.png)

But I want to custom the calendar become my own style as the following image

![enter image description here](https://i.stack.imgur.com/zdn14.png)

I have tried but I don't know how to do it, so someone can show me the way to to it?

Many thanks!

T&T