Skip to content

Commit e94c143

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1211 from telerik/new-kb-customize-day-numbers-and-day-names-scheduler-month-view-dotnet-maui-19505bb5654344d39992a4f17d56e2ab
Added new kb article customize-day-numbers-and-day-names-scheduler-month-view-dotnet-maui
2 parents a9d8010 + cdb3425 commit e94c143

File tree

1 file changed

+132
-0
lines changed

1 file changed

+132
-0
lines changed

‎knowledge-base/customize-day-numbers-and-day-names-scheduler-month-view-dotnet-maui.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
title: Styling Day Numbers and Day Names in Month View in Scheduler for .NET MAUI
3+
description: Learn how to change the position and style of day numbers and day names in the Month View of the Scheduler for .NET MAUI.
4+
type: how-to
5+
page_title: Customizing Day Numbers and Day Names in Scheduler Month View in .NET MAUI
6+
meta_title: Customizing Day Numbers and Day Names in Scheduler Month View in .NET MAUI
7+
slug: customize-day-numbers-and-day-names-scheduler-month-view-dotnet-maui
8+
tags: scheduler, monthview, daystyling, daynamestyling, scheduler .net maui
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
| Version | Product | Author |
15+
| --- | --- | ---- |
16+
| 11.0.1 | Scheduler for .NET MAUI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
17+
18+
## Description
19+
20+
I want to change the position of the day numbers to the start of the month view box in the Scheduler for .NET MAUI. I also want to change the style of the day names in the Month View.
21+
22+
This knowledge base article also answers the following questions:
23+
- How to style day numbers in the Scheduler for .NET MAUI Month View?
24+
- How to customize day names in the Scheduler for .NET MAUI Month View?
25+
- How to use style selectors for day elements in the Scheduler for .NET MAUI?
26+
27+
## Solution
28+
29+
To style day numbers and day names in the Month View, use the `DayStyleSelector` and `DayNameStyleSelector` properties of the [Scheduler Month View](https://docs.telerik.com/devtools/maui/controls/scheduler/views/month-view).
30+
31+
**1.** Define custom styles in the `DayStyleSelector` and `DayNameStyleSelector`. Use the following XAML:
32+
33+
```xaml
34+
<ContentPage.Resources>
35+
<ResourceDictionary>
36+
<local:CustomDayStyleSelector x:Key="CustomDayStyleSelector">
37+
<local:CustomDayStyleSelector.CustomNormalStyle>
38+
<Style TargetType="Label">
39+
<Setter Property="TextColor" Value="#018383" />
40+
<Setter Property="HorizontalTextAlignment" Value="Center" />
41+
<Setter Property="VerticalTextAlignment" Value="Center" />
42+
</Style>
43+
</local:CustomDayStyleSelector.CustomNormalStyle>
44+
<local:CustomDayStyleSelector.CustomTodayStyle>
45+
<Style TargetType="Label">
46+
<Setter Property="TextColor" Value="#830183" />
47+
<Setter Property="FontAttributes" Value="Bold" />
48+
<Setter Property="HorizontalTextAlignment" Value="Center" />
49+
<Setter Property="VerticalTextAlignment" Value="Center" />
50+
</Style>
51+
</local:CustomDayStyleSelector.CustomTodayStyle>
52+
<local:CustomDayStyleSelector.WeekendLabelStyle>
53+
<Style TargetType="Label">
54+
<Setter Property="TextColor" Value="#707070" />
55+
<Setter Property="HorizontalTextAlignment" Value="Center" />
56+
<Setter Property="VerticalTextAlignment" Value="Center" />
57+
</Style>
58+
</local:CustomDayStyleSelector.WeekendLabelStyle>
59+
</local:CustomDayStyleSelector>
60+
</ResourceDictionary>
61+
</ContentPage.Resources>
62+
63+
<telerik:RadScheduler x:Name="scheduler" ActiveViewDefinitionIndex="1">
64+
<telerik:RadScheduler.ViewDefinitions>
65+
<telerik:MonthViewDefinition DayNameStyleSelector="{StaticResource CustomDayStyleSelector}"
66+
DayStyleSelector="{StaticResource CustomDayStyleSelector}" />
67+
</telerik:RadScheduler.ViewDefinitions>
68+
</telerik:RadScheduler>
69+
```
70+
71+
**2.** Define the style selector classes. Use custom logic in the selector to style specific days, such as weekends or the current day.
72+
73+
```csharp
74+
public class CustomDayStyleSelector : DayStyleSelector
75+
{
76+
private Style customNormalStyle;
77+
private Style customTodayStyle;
78+
private Style weekendLabelStyle;
79+
80+
public override Style SelectStyle(object item, BindableObject bindable)
81+
{
82+
var node = (DateNode)item;
83+
if (node.IsToday)
84+
{
85+
return this.customTodayStyle;
86+
}
87+
88+
var date = node.Date;
89+
if (date.DayOfWeek == DayOfWeek.Saturday || date.DayOfWeek == DayOfWeek.Sunday)
90+
{
91+
return this.weekendLabelStyle;
92+
}
93+
94+
return this.customNormalStyle;
95+
}
96+
97+
public Style CustomNormalStyle
98+
{
99+
get => this.customNormalStyle;
100+
set
101+
{
102+
this.customNormalStyle = value;
103+
this.customNormalStyle.BasedOn = this.NormalLabelStyle;
104+
}
105+
}
106+
107+
public Style CustomTodayStyle
108+
{
109+
get => this.customTodayStyle;
110+
set
111+
{
112+
this.customTodayStyle = value;
113+
this.customTodayStyle.BasedOn = this.TodayLabelStyle;
114+
}
115+
}
116+
117+
public Style WeekendLabelStyle
118+
{
119+
get => this.weekendLabelStyle;
120+
set
121+
{
122+
this.weekendLabelStyle = value;
123+
this.weekendLabelStyle.BasedOn = this.NormalLabelStyle;
124+
}
125+
}
126+
}
127+
```
128+
129+
130+
## See Also
131+
- [Scheduler Month View Overview](https://docs.telerik.com/devtools/maui/controls/scheduler/views/month-view)
132+
- [Day Styling Documentation](https://docs.telerik.com/devtools/maui/controls/scheduler/styling/day-styling)

0 commit comments

Comments
 (0)