Rank 1
UPDATE: I just stumbled across this after i posted but it was crashing because i had the Telerik Example: DayStyleSelector applied with the DayTemplate. If i were to remove the DayStyleSelector the control no longer crashes.
The attached image is my Calendar control as you can see it seems like its a bit sqiushed where sunday is right as the edge of the control and saturday has some space to the right of it.
Additionally the dates are not centered in the middle of the selection circles.
I tried to use the example Day template(https://docs.telerik.com/devtools/maui/controls/calendar/templates) to see if i can fix this myself but when applied i get a crash...
<DataTemplate x:Key="DayLabelTemplate">
<telerik:RadBorder>
<Label TextColor="#8660C5"
TextDecorations="Underline"
Text="{Binding Text}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="20"
FontAttributes="Bold"/>
</telerik:RadBorder>
</DataTemplate>
Am I doing something wrong or is there currently something wrong with the Calendar control?
I've only done testing on Android and have not tested anything out on an iOS device yet.
Code behind.....
<GridPadding="20"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Grid
Padding="10"
BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundColorLight},
Dark={StaticResource BackgroundColorDark}}"
HorizontalOptions="CenterAndExpand"
RowSpacing="10"
VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<telerik:RadCalendar
x:Name="MyCalendar"
Grid.Row="0"
AutomationId="calendar"
SelectionMode="Single"
DayTemplate="{StaticResource DayLabelTemplate}"
BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundColorLight},
Dark={StaticResource AccentColorLightDark}}"
DisplayMode="Month"
HeaderBorderStyle="{StaticResource HeaderBorderStyle}"
HeaderLabelStyle="{StaticResource HeaderLabelStyle}"
DayStyleSelector="{StaticResource DayStyleSelector}"
MaxDate="12/31/2024"
MinDate="1/1/2022" />
<StackLayout
Grid.Row="1"
HorizontalOptions="CenterAndExpand"
Orientation="Horizontal"
VerticalOptions="CenterAndExpand">
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS" Value="40" />
<On Platform="Android" Value="20" />
</OnPlatform>
</StackLayout.Spacing>
<Button
Padding="-1"
BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundColorLight},
Dark={StaticResource AccentColorDark}}"
Clicked="CancelButton_Clicked"
HeightRequest="30"
Style="{StaticResource BaseButtonStyle}"
Text="Cancel"
TextColor="{AppThemeBinding Light={StaticResource TextColorLight},
Dark={StaticResource TextColorDark}}" />
<Button
Padding="-1"
BackgroundColor="{AppThemeBinding Light={StaticResource BackgroundColorLight},
Dark={StaticResource AccentColorDark}}"
Clicked="OkButton_Clicked"
HeightRequest="30"
Style="{StaticResource BaseButtonStyle}"
Text="Ok"
TextColor="{AppThemeBinding Light={StaticResource TextColorLight},
Dark={StaticResource TextColorDark}}" />
</StackLayout>
</Grid>
</Grid>
1 Answer, 1 is accepted
Hello Shane,
Thank you for the provided code.
I tested the case with template and styles for daystyle selector here: https://docs.telerik.com/devtools/maui/controls/calendar/styling/day-styling and reproduced the crash.
The exception was unable to cast RadBorder to IText. This happens as you are using RadBorder but the target type in the style selector is CalendarBorderLabel and Calendar Label. It is not RadBorder. It is strongly typed so the type in the template must match the type in the selector.
Also here:
public Style CustomNormalLabelStyle
{
get => customNormalLabelStyle;
set
{
customNormalLabelStyle = value;
//customNormalLabelStyle.BasedOn = this.NormalLabelStyle;
}
}
public Style CustomOutOfScopeLabelStyle
{
get => customOutOfScopeLabelStyle;
set
{
customOutOfScopeLabelStyle = value;
//customOutOfScopeLabelStyle.BasedOn = this.OutOfScopeLabelStyle;
}
}the base is of type CalendarLabel, so it cannot be used in a day template with RadBorder. The element in the template should be CalendarLabel.
Here is an example with day template selector and day style selector https://github.com/telerik/maui-samples/blob/main/Samples/ControlsSamples/Examples/CalendarControl/CustomizationExample/CustomizationView.xaml
Regarding to the DayTemplate definition, I cannot reproduce the behavior with the UI on the image you have provided. I will need the complete setup. Maybe you have added some implicit styles for labels, etc. I have attached an image from my test.
Regards,
Didi
Progress Telerik