Calendar Month View and Event Indicator

3 posts, 1 answers
  1. Sivaramalingam
    Sivaramalingam avatar
    2 posts
    Member since:
    Jun 2018

    Posted 06 Jun Link to this post

    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.

  2. Answer
    Didi
    Admin
    Didi avatar
    93 posts

    Posted 08 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Sivaramalingam
    Sivaramalingam avatar
    2 posts
    Member since:
    Jun 2018

    Posted 08 Jun in reply to Didi Link to this post

    Thanks for your detailed answer. It was really helpful. 
Back to Top