RadCalendar height is bugged

[Olivier]

Hello, can anyone else confirm me that the RadCalendar has a bug on the height ?
(I'm using the CalendarViewMode.Week view mode)

Exemple : a Calendar inside a grid vs a calendar inside a stacklayout. With a row set to Auto, it should behave the same. But it seems that the Calendar is taking all the available height like if the row's height was a star instead of auto.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ti:RadCalendar NativeControlLoaded="RadCalendar_NativeControlLoaded" Grid.Row="0" />
    <v:MeetingsDayInfoView  Grid.Row="1"/>
    <ListView BackgroundColor="LightSkyBlue" Grid.Row="2" />
</Grid>

<StackLayout>
    <ti:RadCalendar NativeControlLoaded="RadCalendar_NativeControlLoaded" />
    <v:MeetingsDayInfoView />
    <ListView BackgroundColor="LightSkyBlue" VerticalOptions="FillAndExpand" />
</StackLayout>

 

Finally, if I don't set the height of the calendar to HeightRequest="100", the calendar seems to keep the first height it had when loading the month CalendarViewMode.

 

When calling TrySetViewMode(CalendarViewMode.Week) from code behind, it should refresh the height IMHO.

I hate to set height and width on element which doesn't need. The height should be dynamic and depends on the label fontsize etc.

 

 I've attached a picture of the 3 behaviors.

Any suggestion would be nice.
Thanks !

[Didi]

Hello Olivier,

Thank you for the provided code.

I have created a sample project where I have tested all described scenarios. By default when RadCalendar control is inside a Grid with a row set to Auto and Calendar is in Week mode, calendar cells consume more space. In this case you should create a custom renderer. Please take a look at the attached project how this could be achieved on Android - refer to the CustomCalendarRenderer.cs file inside the Android project.

In case the custom renderer is not suitable for you, you could check the commented approaches inside the MainPage.xaml file.

I hope I was helpful.

Regards,
Didi
Progress Telerik

[Olivier]

Thanks I will look at that sample tomorrow.

Have a good day

[Olivier]

Hello Didi,

I wanted to thank you again for the Android custom renderer.

I've been looking for the equivalent iOS renderer but there is no such property on the iOS TKCalendarPresenterBase / TKCalendarMonthPresenter / TKCalendarWeekPresenter / TKCalendarDayViewPresenter.

I've tried few things with the HeaderView from the calendar inside the iOS renderer but I'm missing something.

The code provided in the MainPage is good to have a better behavior when the Calendar is inside a Grid instead of StackLayout. Thanks for this sample. I should have tried that myself.

Do you know if one of your team have implemented the same functionality on the iOS renderer than the Android one ? It could be a time saver.

Thanks again for everything.

May I suggest you to add the Android renderer in the documentation ? I think it might be very helpful for people starting with this control. And if you find the iOS one, please consider to add this one too.

I wish you a good day

 

[Didi]

Hi Olivier,

I have tried different approaches for achieving same scenario on iOS through custom renderer but I could not find any suitable solution for this. Indeed the native Android and iOS calendars are two different controls and do not have 100% appearance-matching all the platforms. 

In case you want to use GridLayout instead of StackLayout you could set HeightRequest to the calendar or to the concrete Grid.Row where the calendar control is positioned: For example:

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <telerikInput:RadCalendar x:Name="calendar"
                     Grid.Row="0"
                     HeightRequest="100"
                     NativeControlLoaded="calendar_NativeControlLoaded"/>
    <Label Text="Meetings" Grid.Row="1"/>
    <ListView BackgroundColor="LightSkyBlue" Grid.Row="2"/>
</Grid>

I would like to thank you for your feedback regarding Calendar documentation. We will have it in mind for our next iterations.

Let me know if you have any additional questions or concerns.

Regards,
Didi
Progress Telerik