diff --git a/MAUI/Calendar/customizations.md b/MAUI/Calendar/customizations.md index afb7c0ebf..fb7c9c1e3 100644 --- a/MAUI/Calendar/customizations.md +++ b/MAUI/Calendar/customizations.md @@ -609,7 +609,7 @@ You can customize the year cell appearance by using the [CellTemplate](https://h LeadingDateTemplate="{StaticResource leadingDateTemplate}"/> + View="Decade"> @@ -648,4 +648,242 @@ this.calendar.View = CalendarView.Decade; {% endhighlight %} {% endtabs %} -![Decade view template selector in .NET MAUI Calendar.](images/customization/net-maui-decade-view-cell-template-selector.png) \ No newline at end of file +![Decade view template selector in .NET MAUI Calendar.](images/customization/net-maui-decade-view-cell-template-selector.png) + +## Selection cell appearance on month view using DataTemplate + +The `SfCalendar` provides the [SelectionCellTemplate]() property to customize the appearance of selected date cells in the MonthView. This property is of type DataTemplate and allows you to define a custom layout specifically for the selected cell. + + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +public partial class MainPage : ContentPage +{ + private DataTemplate template; + public MainPage() + { + InitializeComponent(); + template = new DataTemplate(() => + { + Grid grid = new Grid(); + grid.BackgroundColor = Colors.Green; + + Label label = new Label(); + label.SetBinding(Label.TextProperty, "Date.Day"); + label.HorizontalOptions = LayoutOptions.Center; + label.VerticalOptions = LayoutOptions.Center; + label.Padding = new Thickness(2); + grid.Children.Add(label); + + return grid; + }); + calendar.SelectionCellTemplate = template; + } +} + +{% endhighlight %} +{% endtabs %} + +![Month View Selection Cell Template in .NET MAUI Calendar.](resize-1747304780803030777Screenshot20250512120551.png) + +N> +The `SelectionCellTemplate` is applicable only when the [SelectionMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html?tabs=tabid-6%2Ctabid-12%2Ctabid-18%2Ctabid-50%2Ctabid-10%2Ctabid-8%2Ctabid-14%2Ctabid-4%2Ctabid-22%2Ctabid-26%2Ctabid-24%2Ctabid-16%2Ctabid-2%2Ctabid-20#Syncfusion_Maui_Calendar_SfCalendar_SelectionMode) is set to Single. It is not applied in Multiple or Range selection modes. + +## Selection cell appearance on month view using DataTemplateSelector + +You can customize the appearance of selected date cells in the SfCalendar's `MonthView` by using the [SelectionCellTemplate]() property within the `SfCalendar`. By combining it with a DataTemplateSelector, you can apply different styles for selected cells based on specific conditions. + +The DataTemplateSelector lets you define how selected cells should appear, depending on factors like the day of the week, the month, or other custom logic. This approach provides more flexibility in styling selected dates in the MonthView. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="TemplateSelector.cs" %} + +public class SelectionCellTemplateSelector : DataTemplateSelector +{ + public SelectionCellTemplateSelector() + { + } + public DataTemplate? NormalDateTemplate { get; set; } + public DataTemplate? TodayDateTemplate { get; set; } + public DataTemplate? LeadingTrailingDateTemplate { get; set; } + + protected override DataTemplate OnSelectTemplate(object item, BindableObject container) + { + var monthCellDetails = item as CalendarCellDetails; + if (monthCellDetails.Date == DateTime.Today.Date) + return TodayDateTemplate; + else if (monthCellDetails.Date.Month != DateTime.Today.Month && (monthCellDetails.Date.Month <= 12 || monthCellDetails.Date.Month >= 1)) + return LeadingTrailingDateTemplate; + else + return NormalDateTemplate; + } +} + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +this.calendar.View = CalendarView.Month; + +{% endhighlight %} +{% endtabs %} + +![Month View Selection cell Template Selector in .NET MAUI Calendar.](resize-17473048601284115899Screenshot20250512123710.png) + +## Selection cell appearance on year view using DataTemplate + +The `SfCalendar` provides the [SelectionCellTemplate] property to customize the appearance of selected date cells in the YearView. This property is of type DataTemplate and allows you to define a custom layout for the selected cells in the YearView. + + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +public partial class MainPage : ContentPage +{ + private DataTemplate template; + public MainPage() + { + InitializeComponent(); + template = new DataTemplate(() => + { + Grid grid = new Grid(); + grid.BackgroundColor = Colors.Green; + + Label label = new Label(); + label.HorizontalOptions = LayoutOptions.Center; + label.VerticalOptions = LayoutOptions.Center; + label.Padding = new Thickness(2); + grid.Children.Add(label); + + return grid; + }); + calendar.SelectionCellTemplate = template; + } +} + +{% endhighlight %} +{% endtabs %} + +![Year View Selection Cell Template in .NET MAUI Calendar.](resize-1747304901648021295Screenshot20250512123540.png) + +N> +The `SelectionCellTemplate` is applicable only when the [SelectionMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html?tabs=tabid-6%2Ctabid-12%2Ctabid-18%2Ctabid-50%2Ctabid-10%2Ctabid-8%2Ctabid-14%2Ctabid-4%2Ctabid-22%2Ctabid-26%2Ctabid-24%2Ctabid-16%2Ctabid-2%2Ctabid-20#Syncfusion_Maui_Calendar_SfCalendar_SelectionMode) is set to Single and [AllowViewNavigation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Calendar.SfCalendar.html?tabs=tabid-6%2Ctabid-12%2Ctabid-18%2Ctabid-50%2Ctabid-10%2Ctabid-8%2Ctabid-14%2Ctabid-4%2Ctabid-22%2Ctabid-26%2Ctabid-24%2Ctabid-16%2Ctabid-2%2Ctabid-20#Syncfusion_Maui_Calendar_SfCalendar_AllowViewNavigation) is false. It is not applied in Multiple or Range selection modes. + +## Selection cell appearance on year view using DataTemplateSelector + +You can customize the appearance of selected date cells in the SfCalendar's YearView by using the [SelectionCellTemplate] property within the `SfCalendar`. By combining it with a DataTemplateSelector, you can apply different styles for selected cells based on specific conditions. + +The DataTemplateSelector lets you define how selected cells should appear, depending on factors like the month, the year, or other custom logic. This approach provides more flexibility in styling selected dates in the YearView. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight c# tabtitle="TemplateSelector.cs" %} + +public class SelectionCellTemplateSelector : DataTemplateSelector +{ + public SelectionCellTemplateSelector() + { + } + public DataTemplate? NormalDateTemplate { get; set; } + public DataTemplate? TodayDateTemplate { get; set; } + + protected override DataTemplate OnSelectTemplate(object item, BindableObject container) + { + var yearcellDetails = item as CalendarCellDetails; + if (yearcellDetails.Date.Month == DateTime.Today.Date.Month) + { + return TodayDateTemplate; + } + else + { + return NormalDateTemplate; + } + } +} + +{% endhighlight %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} + +this.calendar.View = CalendarView.Year; + +{% endhighlight %} +{% endtabs %} + +![Year View Selection Cell Template Selector in .NET MAUI Calendar.](resize-174730495244168334Screenshot20250512123923.png) \ No newline at end of file