Appearance and Styling in UWP Calendar

Every part of SfCalendar can be customized. It can be customized as follows:

Customizing the Active Date Cell

The active calendar day button template can be modified using the CellTemplate property. It also provides the CellTemplateSelector property for applying selective templates by a logic.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar">

    <input:SfCalendar.CellTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding Day}" VerticalAlignment="Center"
               HorizontalAlignment="Center" Foreground="Red"/>
               
    </DataTemplate>

    </input:SfCalendar.CellTemplate>

    </input:SfCalendar>
</Page>

SfCalendar-img15

Customizing the Disabled Date Cell

The inactive/disabled calendar day button template can be modified using the DisabledCellTemplate property.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar">

    <input:SfCalendar.DisabledCellTemplate>

    <DataTemplate>

    <Grid Background="Gray">

    <TextBlock Text="{Binding Day}" VerticalAlignment="Bottom"
               Foreground="White" Opacity="1" Margin="3"/>
               
    </Grid>

    </DataTemplate>

    </input:SfCalendar.DisabledCellTemplate>

    </input:SfCalendar>
</Page>
using Syncfusion.UI.Xaml.Controls.Input;

calendar.VisibleMinDate = new DateTime(2015, 12, 5);

calendar.VisibleMaxDate = new DateTime(2015, 12, 25);
Imports Syncfusion.UI.Xaml.Controls.Input;

calendar.VisibleMinDate = New Date(2015, 12, 5)

calendar.VisibleMaxDate = New Date(2015, 12, 25)

SfCalendar-img16

Customizing Day Name Cell

The template of day names can also be modified using the DayNameCellTemplate property.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar">

    <input:SfCalendar.DayNameCellTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding}" Foreground="Red"/>

    </DataTemplate>

    </input:SfCalendar.DayNameCellTemplate>

    </input:SfCalendar>
</Page>

SfCalendar-img17

Customizing Header

The template of the header in SfCalendar can be modified using the HeaderTemplate property.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar" >

    <input:SfCalendar.HeaderTemplate>

    <DataTemplate>

    <TextBlock Text="{Binding}" FontSize="20" Foreground="Red"/>

    </DataTemplate>

    </input:SfCalendar.HeaderTemplate>

    </input:SfCalendar>
</Page>

SfCalendar-img18

Changing Selected Date Background

The background of the selected date can be set using the SelectedDateBackground property.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar" SelectedDateBackground="Red"/>
</Page>
using Syncfusion.UI.Xaml.Controls.Input;

calendar.SelectedDateBackground = new SolidColorBrush(Windows.UI.Colors.Red);
Imports Syncfusion.UI.Xaml.Controls.Input;

calendar.SelectedDateBackground = New SolidColorBrush(Windows.UI.Colors.Red)

SfCalendar-img19

Customizing Scroll Button

The template of the previous and next scroll buttons can be modified with the PreviousScrollButtonTemplate and NextScrollButtonTemplate properties.

<Page
   ...
   xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input">

    <input:SfCalendar x:Name="calendar" ShowNavigationButton="True" >
<input:SfCalendar.PreviousScrollButtonTemplate>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="#414242"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="#ECEEEE"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Ellipse x:Name="ellipse"
Canvas.Top="50"
Canvas.Left="50"
Fill="Red"
Margin="3" Width="25" Height="25"
StrokeThickness="{TemplateBinding BorderThickness}"
Stroke="{TemplateBinding BorderBrush}">
</Ellipse>
<Border x:Name="Border" VerticalAlignment="Center" HorizontalAlignment="Center">
<Path x:Name="Triangle" 
Data="F1M646.688,13.5518L646.783,13.4593 646.965,13.639 668.383,35.0583 689.459,35.0583 665.155,10.751 657.503,3.10126 657.323,2.92023 664.876,-4.63837 689.184,-28.9417 668.109,-28.9417 646.688,-7.52637 636.15,3.01398 646.688,13.5518z" Stretch="Uniform" Fill="{TemplateBinding Foreground}" Width="12" Height="12"
Margin="-0.5,0,1.3,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="180" />
<ScaleTransform ScaleX="-1" ScaleY="-1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Border>
</Grid>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
</input:SfCalendar.PreviousScrollButtonTemplate>
<input:SfCalendar.NextScrollButtonTemplate>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="#414242"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="#ECEEEE"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Ellipse x:Name="ellipse"
Canvas.Top="50"
Canvas.Left="50"
Fill="Red"
Margin="3" Width="25" Height="25"
StrokeThickness="{TemplateBinding BorderThickness}"
Stroke="{TemplateBinding BorderBrush}">
</Ellipse>
<Border x:Name="Border" VerticalAlignment="Center" HorizontalAlignment="Center">
<Path x:Name="Triangle" 
Data="F1M646.688,13.5518L646.783,13.4593 646.965,13.639 668.383,35.0583 689.459,35.0583 665.155,10.751 657.503,3.10126 657.323,2.92023 664.876,-4.63837 689.184,-28.9417 668.109,-28.9417 646.688,-7.52637 636.15,3.01398 646.688,13.5518z" Stretch="Uniform" Fill="{TemplateBinding Foreground}" Width="12" Height="12" 
Margin="-1,0,-1,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="-1" ScaleY="-1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Border>
</Grid>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>

</input:SfCalendar.NextScrollButtonTemplate>
</input:SfCalendar>
</Page>

SfCalendar-img20

Refresh the Layout

The Refresh method is used to refresh the layout of SfCalendar so that the cell templates are applied again.

using Syncfusion.UI.Xaml.Controls.Input;

calendar.Refresh();
Imports Syncfusion.UI.Xaml.Controls.Input;

calendar.Refresh()