Calendar Month View and Event Indicator

[Sivaramalingam]

How to achieve following things in Xamarin.iOS.

-- How to hide next month dates in month view? Currently, it is displaying the next month dates in the current month. (Refer attached image: Month_View_Dates) 

-- How to place event indicators above the dates? It is displayed below the dates now. (Refer attached image: Event _Indicator)

-- How to display weekends in grey? (Refer attached image: Event _Indicator)

 

Thanks in advance.

[Didi]

Hi Sivaramalingam,

Thank you for the provided images.

Hiding the next month dates is currently not part of the RadCalendar functionalities. As a workaround you could change the visibility of the cells which are not from the current month through CustomRenderer.
However, this will not affect the calculations that the calendar does to position its cells and it will still display 6 rows.
Please take a look at the provided snippet for this functionality: 

public class CustomCalendarRenderer : CalendarRenderer
{
    protected override CalendarDelegate CreateCalendarDelegateOverride()
    {
        return new CustomCalendarDelegate();
    }
}

public class CustomCalendarDelegate : CalendarDelegate
{
        public override void UpdateVisualsForCell(TKCalendar calendar, TKCalendarCell cell)
        {
            base.UpdateVisualsForCell(calendar, cell);

            var dayCell = cell as TKCalendarDayCell;
            if (dayCell != null)
            {
                dayCell.Hidden = (dayCell.State & TKCalendarDayState.CurrentMonth) == 0;
            }
        }
}

For more information about how to create a custom renderer for iOS in Calendar control, take a look at our documentation here.

About hiding the previous month days you can set the viewMode property to TKCalendarViewMode to enable this view. How to do that, please take a look at the following link below:
https://docs.telerik.com/devtools/xamarin/nativecontrols/ios/calendar/view-modes#flow-layout-with-months-and-month-days

Events indicators can be positioned above the dates by setting the ShapesVerticalLocation property to Top. Please take a look at the provided snippet below how to implement this in the project:

calendar.AppointmentsStyle = new Telerik.XamarinForms.Input.CalendarAppointmentsStyle
           {
               DisplayMode = AppointmentDisplayMode.Shape,
               MaxCount = 1,
               ShapeSize = new Xamarin.Forms.Size(10, 10),
               ShapesHorizontalLocation = HorizontalLocation.Center,
               ShapesVerticalLocation = VerticalLocation.Top,
               ShapeType = CalendarAppointmentShapeType.Ellipse
           };

Please take a look at our documentation here how to use the AppointmentsStyle property of the RadCalendar component.

I have logged the request for hiding next month days in month view as a feature request so you can find your Telerik points updated for reporting this to us.

I hope I could be of help.

Regards,
Didi
Progress Telerik

[Sivaramalingam]

Thanks for your detailed answer. It was really helpful.