Category / Section
How to customize the month cell of SfCalendar?
1 min read
You can customize the month cells of SfCalendar by using CellTemplate in MonthViewSettings. Default binding context of CellTemplate is DateTime which holds the Day, Month and Year.
The following code illustrates how to achieve this.
Using XAML:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Syncfusion ="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
x:Class="GettingStartedKBSyncfusion.MainPage">
<ContentPage.Resources>
<ResourceDictionary >
<DataTemplate x:Key="ValidTemplate">
<Grid >
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="circle.png"/>
<Label Text="{Binding Day}" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</Grid>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Syncfusion:SfCalendar x:Name="calendar" >
<Syncfusion:SfCalendar.MonthViewSettings>
<Syncfusion:MonthViewSettings DateSelectionColor="#dddddd" CellTemplate="{StaticResource ValidTemplate}"/>
</Syncfusion:SfCalendar.MonthViewSettings>
</Syncfusion:SfCalendar>
</ContentPage.Content>
</ContentPage>
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStartedKBSyncfusion-1209443873.zip
Screenshot:
|
