Skip to content

Commit 8ead35d

Browse files
author
KB Bot
committed
Added new kb article custom-range-selector-calendar-dotnet-maui
1 parent 2c0a937 commit 8ead35d

File tree

1 file changed

+138
-0
lines changed

1 file changed

+138
-0
lines changed

‎knowledge-base/custom-range-selector-calendar-dotnet-maui.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
title: Style the Range Selector for Calendar in .NET MAUI
3+
description: Learn how to style the range selector for the Calendar component in .NET MAUI for the first, middle, and last selected dates.
4+
type: how-to
5+
page_title: Styling Calendar Range Selection in .NET MAUI
6+
slug: custom-range-selector-calendar-dotnet-maui
7+
tags: calendar, .net maui, range selection, styling, templates
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
| Version | Product | Author |
14+
| --- | --- | ---- |
15+
| 11.0.0 | Telerik UI for .NET MAUI Calendar | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
16+
17+
## Description
18+
19+
I want to create a custom range selector for the [Calendar](https://docs.telerik.com/devtools/maui/controls/calendar/overview) component in .NET MAUI with specific visual styling for the selected dates. The first and last selected dates should have semi-circular styles, while the middle dates should appear as rectangular blocks or connected backgrounds.
20+
21+
This knowledge base article also answers the following questions:
22+
- How to style range selection in .NET MAUI Calendar?
23+
- How to apply templates for selected dates in .NET MAUI Calendar?
24+
- How to customize date styles in .NET MAUI Calendar?
25+
26+
## Solution
27+
28+
To achieve the desired styling for the Calendar component, define custom styles and use a `CalendarStyleSelector`. Follow the steps below:
29+
30+
**1.** Define custom styles in the XAML file for the first, middle, and last selected dates using the `CalendarBorderLabel` properties.
31+
32+
```xml
33+
<ContentPage.Resources>
34+
<ResourceDictionary>
35+
<local:CustomCalendarStyleSelector x:Key="DayStyleSelector">
36+
<local:CustomCalendarStyleSelector.CustomSelectedFirstStyle>
37+
<Style TargetType="telerik:CalendarBorderLabel">
38+
<Setter Property="TextColor" Value="#04A2AA" />
39+
<Setter Property="FontAttributes" Value="Italic" />
40+
<Setter Property="BorderThickness" Value="0" />
41+
<Setter Property="BorderBackgroundColor" Value="#9AD9DD" />
42+
</Style>
43+
</local:CustomCalendarStyleSelector.CustomSelectedFirstStyle>
44+
<local:CustomCalendarStyleSelector.CustomSelectedMiddleStyle>
45+
<Style TargetType="telerik:CalendarBorderLabel">
46+
<Setter Property="BorderThickness" Value="0" />
47+
<Setter Property="BorderBackgroundColor" Value="LightCoral" />
48+
</Style>
49+
</local:CustomCalendarStyleSelector.CustomSelectedMiddleStyle>
50+
<local:CustomCalendarStyleSelector.CustomSelectedLastStyle>
51+
<Style TargetType="telerik:CalendarBorderLabel">
52+
<Setter Property="TextColor" Value="White" />
53+
<Setter Property="HorizontalTextAlignment" Value="Center" />
54+
<Setter Property="BorderBackgroundColor" Value="Red" />
55+
<Setter Property="BorderThickness" Value="0" />
56+
</Style>
57+
</local:CustomCalendarStyleSelector.CustomSelectedLastStyle>
58+
</local:CustomCalendarStyleSelector>
59+
</ResourceDictionary>
60+
</ContentPage.Resources>
61+
```
62+
63+
**2.** Link the styles to the Calendar in the XAML file:
64+
65+
```xml
66+
<telerik:RadCalendar x:Name="calendar"
67+
SelectionMode="Range"
68+
DisplayMode="Month"
69+
DayStyleSelector="{StaticResource DayStyleSelector}" />
70+
```
71+
72+
**3.** Implement the `CustomCalendarStyleSelector` class in the code-behind file to apply the styles based on the selection state.
73+
74+
```csharp
75+
public class CustomCalendarStyleSelector : CalendarStyleSelector
76+
{
77+
private Style customSelectedFirstStyle;
78+
private Style customSelectedMiddleStyle;
79+
private Style customSelectedLastStyle;
80+
81+
public override Style SelectStyle(object item, BindableObject container)
82+
{
83+
var node = (CalendarNode)item;
84+
var calendar = (RadCalendar)node.Calendar;
85+
if (node.IsSelected && node.SelectionState == CalendarNodeSelectionState.First)
86+
{
87+
return this.CustomSelectedFirstStyle;
88+
}
89+
if (node.IsSelected && node.SelectionState == CalendarNodeSelectionState.Middle)
90+
{
91+
return this.CustomSelectedMiddleStyle;
92+
}
93+
if (node.IsSelected && node.SelectionState == CalendarNodeSelectionState.Last)
94+
{
95+
return this.CustomSelectedLastStyle;
96+
}
97+
return base.SelectStyle(item, container);
98+
}
99+
100+
public Style CustomSelectedFirstStyle
101+
{
102+
get => customSelectedFirstStyle;
103+
set
104+
{
105+
customSelectedFirstStyle = value;
106+
customSelectedFirstStyle.BasedOn = this.SelectedBorderStyle;
107+
}
108+
}
109+
110+
public Style CustomSelectedMiddleStyle
111+
{
112+
get => customSelectedMiddleStyle;
113+
set
114+
{
115+
customSelectedMiddleStyle = value;
116+
customSelectedMiddleStyle.BasedOn = this.SelectedBorderStyle;
117+
}
118+
}
119+
120+
public Style CustomSelectedLastStyle
121+
{
122+
get => customSelectedLastStyle;
123+
set
124+
{
125+
customSelectedLastStyle = value;
126+
customSelectedLastStyle.BasedOn = this.SelectedBorderStyle;
127+
}
128+
}
129+
}
130+
```
131+
132+
**4.** If you require more control over the borders or additional customization, use templates. Refer to the [Calendar Templates](https://docs.telerik.com/devtools/maui/controls/calendar/templates) documentation for more details.
133+
134+
## See Also
135+
136+
- [Calendar Overview](https://docs.telerik.com/devtools/maui/controls/calendar/overview)
137+
- [Calendar Templates](https://docs.telerik.com/devtools/maui/controls/calendar/templates)
138+
- [Calendar Selection](https://docs.telerik.com/devtools/maui/controls/calendar/selection)

0 commit comments

Comments
 (0)