Modify week view in RadCalendar

[Itzik]

Hi

I im using the RadCalendar on mode day (image attached) and i need to modify the upper week days line - to be smaller and include only the day of month, and exclude the abbreviated daily tasks.

I couldnt find any lead in the documentations.
I have created custom renderer but i really struggle to find the right way to achieve this.

 

[Didi]

Hello Itzik,

All customizations that are not exposed in Xamarin.Forms RadCalendar level can be achieved with customizations using the native Calendar control. Here is the native android Calendar docs: https://docs.telerik.com/devtools/xamarin/nativecontrols/android/calendar/calendar-overview 

I have attached the renderer files you can use as a base. The files include many customization options. There are comments.

In general, you can reduce the height of the week by using the following code in the renderer: 

        protected override void OnElementChanged(ElementChangedEventArgs<RadCalendar> e)
        {
            base.OnElementChanged(e);

            if (this.Control != null)
            {
                // customization for week view
                //this.Control.WeekHeightRequest = 20;

In order to remove the appointments, you have to find a way to replace the view or use an additional property. If you need help with the custom development, you can contact the https://www.telerik.com/services 

Regards,
Didi
Progress Telerik

[Dan Avni]

1. Very nice, thanks!

2. Whats the way for iOS? since the native class is different than in android (and weekHeightRequest does not exist)

[Didi]

Hi Dan,

On IOS the Calendar is different control than Android. You can review the native API. Here are the ViewModes described: https://docs.telerik.com/devtools/xamarin/nativecontrols/ios/calendar/view-modes 

If you want to modify the MultiDayView, you have to use the native presenter. Here is the renderer implementation.

using App3.iOS;
using Telerik.XamarinForms.Input;
using Telerik.XamarinForms.InputRenderer.iOS;
using TelerikUI;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(RadCalendar), typeof(CustomCalendarRenderer))]

namespace App3.iOS
{
    public class CustomCalendarRenderer : CalendarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadCalendar> e)
        {
            base.OnElementChanged(e);

            var control = this.Control as TKExtendedCalendar;
            if (control != null)
            {
                TKCalendarMultiDayViewPresenter mpr = (TKCalendarMultiDayViewPresenter)control.Presenter;
                mpr.Style.DayNameCellHeight = 10;
                mpr.Style.BackgroundColor = UIKit.UIColor.Blue;
            }
        }
    }
}

This is just a suggestion. You can review the native API and styling options of the native iOS Calendar control.