RadScheduler landscape mode

1 Answer 5 Views
Scheduler
Itzik
Top achievements
Rank 1
Iron
Itzik asked on 19 Oct 2025, 11:18 AM
When im using the RadScheduler on landscape mode, and im also having some items on the upper part of the page (lets say 50%), then when i click to open the month dropdown to select the day in the month, not all the month is visible (due to lack of vertical space) (which is fine) and the month dropdown isnt scrollable, so some days cant be reached (which isnt fine)...

Any help regarding this?

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 20 Oct 2025, 11:45 AM

Hi Itzik,

The behavior happens as there is a definitive heigh for the Calendar control. 

In order to override this, you can use the Scheduler control Template for Mobile and set another value for the inner calendar control. How to get the template, add the Telerik Theming and navigate to the TelerikTheming/Styles/Platform/Scheduler.xaml file

Here is an example:

	<ContentPage.Resources>
		<Style x:Key="SchedulerCalendarStyle_Mobile" TargetType="telerik:RadCalendar">
			<Setter Property="BackgroundColor" Value="Transparent" />
			<Setter Property="HeaderBorderStyle">
				<Setter.Value>
					<Style TargetType="telerik:RadBorder">
						<Setter Property="IsVisible" Value="False" />
					</Style>
				</Setter.Value>
			</Setter>
			<Setter Property="HeightRequest" Value="200" />
		</Style>
		<ControlTemplate x:Key="RadSchedulerControlTemplate_Mobile">
			<Grid RowDefinitions="Auto, *">
				<telerik:SchedulerExpander x:Name="PART_HeaderExpander">
					<telerik:SchedulerExpander.Header>
						<telerik:RadBorder Style="{TemplateBinding ActualHeaderBorderStyle}">
							<Grid ColumnDefinitions="*, Auto, Auto">
								<HorizontalStackLayout HorizontalOptions="Start">
									<Label Style="{TemplateBinding ActualHeaderLabelStyle}" />
									<Label Style="{TemplateBinding ActualHeaderIndicatorLabelStyle}" />
								</HorizontalStackLayout>
								<Button Grid.Column="1"
                                    Style="{TemplateBinding ActualTodayButtonStyle}"
                                    IsVisible="{TemplateBinding IsTodayButtonVisible}"
                                    Command="{TemplateBinding TodayCommand}" />
								<telerik:SchedulerDropDownButton x:Name="PART_ViewDefinitionPicker"
                                                                      Grid.Column="2" 
                                                                      ItemStyle="{TemplateBinding ActualViewDefinitionHeaderItemStyle}"
                                                                      SelectedItemStyle="{TemplateBinding ActualActiveViewDefinitionHeaderItemStyle}" />
							</Grid>
						</telerik:RadBorder>
					</telerik:SchedulerExpander.Header>
					<telerik:SchedulerExpander.Content>
						<telerik:RadCalendar x:Name="PART_HeaderCalendar" HeightRequest="200"
                                                     Style="{StaticResource SchedulerCalendarStyle_Mobile}"
                                                     Culture="{Binding Culture, Source={RelativeSource TemplatedParent}}"
                                                     DisplayDate="{Binding CurrentDate, Source={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                     SelectedDate="{Binding CurrentDate, Source={RelativeSource TemplatedParent}, Mode=TwoWay}" />
					</telerik:SchedulerExpander.Content>
				</telerik:SchedulerExpander>
				<telerik:RadSchedulerContent x:Name="PART_SchedulerContent"
                                                     Grid.Row="1"
                                                     IsClippedToBounds="True" />
			</Grid>
		</ControlTemplate>
		
		
		
	</ContentPage.Resources>
	<telerik:RadScheduler x:Name="scheduler" CurrentDate="10/18/2023" 
						  ControlTemplate="{StaticResource RadSchedulerControlTemplate_Mobile}">
		<telerik:RadScheduler.ViewDefinitions>
			<telerik:WeekViewDefinition />
			<telerik:WeekViewDefinition IsWeekendVisible="False" Title="Work Week" />
			<telerik:MultidayViewDefinition VisibleDays="3" Title="3 Day" />
			<telerik:DayViewDefinition />
			<telerik:MonthViewDefinition />
		</telerik:RadScheduler.ViewDefinitions>
	</telerik:RadScheduler>

And the final result is attached as an image.

Regards,
Didi
Progress Telerik

Your perspective matters! Join other professionals in the State of Designer-Developer Collaboration 2025: Workflows, Trends and AI survey to share how AI and new workflows are impacting collaboration, and be among the first to see the key findings.
Start the 2025 Survey
Tags
Scheduler
Asked by
Itzik
Top achievements
Rank 1
Iron
Answers by
Didi
Telerik team
Share this question
or