Xamarin.Forms - Custom CalendarCell with dot

[Tuyen]

Hi,

I am following the tutorial (https://docs.telerik.com/devtools/xamarin/nativecontrols/android/calendar/calendar-events) to make the events shown in day/month views as circle (dot).

However, the first time, the renderer isn't invoked, but after moving to another screen then moving back, the renderer is triggered.

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

            if (Control != null) {
                Control.EventAdapter.Renderer = eventRenderer;
            }
        }

Please advise.

[Didi]

Hi Tuyen,

Thank you for your interest in RadCalendar for Xamarin.Forms. 

As you want to change the appointment/event shape to dot/circle, you do not need a custom renderer. The RadCalerndar provides an option to achieve this in Xamarin.Forms. We have Appointments Styling article in our documentation. Please check the following link https://docs.telerik.com/devtools/xamarin/controls/calendar/styling/calendar-styling-appointments 

Please review the Shape Specific properties. You can change the shape using the ShapeType property: https://docs.telerik.com/devtools/xamarin/controls/calendar/styling/calendar-styling-appointments#shapes-specific-properties 

Give this a try and let me know if you have any additional questions.  

Regards,
Didi
Progress Telerik

[Tuyen]

Hi,

Thank you for your reply.

it's really helpful.

however, the look & feel doesn't look as expected.

I set it Eclipse, but some are in rectangle.

<telerikInput:CalendarAppointmentsStyle
                    DisplayMode="Shape"
                    Padding="5"
                    Spacing="1"
                    ShapeType="Ellipse"
                    ShapesHorizontalLocation="Right"
                    ShapesVerticalLocation="Bottom"
                    ShapesOrientation="Horizontal"
                    AllDayShapesDisplayMode="WithShapes"
                    AllDayIndicatorLocation="Top"
                    AllDayTextPadding="5"
                    AllDayIndicatorPadding="5, 2"
                    AllDayIndicatorWidth="2">
                    <telerikInput:CalendarAppointmentsStyle.ShapeSize>
                        <Size
                            Width="6"
                            Height="6" />
                    </telerikInput:CalendarAppointmentsStyle.ShapeSize>
                </telerikInput:CalendarAppointmentsStyle>

Could you advise more?

[Didi]

Hi Tuyen,

Thank you for the provided code and image. 

The behavior is expected for the all-day appointments shape as when AllDayShapesDisplayMode is set to "WithShapes" the default shape is a rectangle. You will need to change the all-day appointment shape setting the AllDayShapeType="Ellipse". 

Example:

 

<telerikInput:RadCalendar.AppointmentsStyle>
    <telerikInput:CalendarAppointmentsStyle  
                DisplayMode="Shape"     
                Padding="5"
                Spacing="1"                          
                ShapeType="Ellipse"
                ShapesHorizontalLocation = "Right"
                ShapesVerticalLocation = "Bottom"
                ShapesOrientation = "Horizontal"
                AllDayShapeType="Ellipse"
                AllDayShapesDisplayMode="WithShapes"
                AllDayIndicatorLocation="Top"
                AllDayIndicatorPadding="5, 2"
                AllDayIndicatorWidth="2">
        <telerikInput:CalendarAppointmentsStyle.ShapeSize>
            <Size Width="6" Height="6" />
        </telerikInput:CalendarAppointmentsStyle.ShapeSize>
    </telerikInput:CalendarAppointmentsStyle>
</telerikInput:RadCalendar.AppointmentsStyle>

I hope the provided information was helpful.

Regards,
Didi
Progress Telerik