ViewMode Year Layout not Centered

[Ericky]

Hello,

 

Using the view mode 'Year' for the RadCalendar, the layout of the date container is not centered. It pushes to the right side and leaves a big opening on the left side.

 

This happens with or without custom styling.

[Nick Iliev]

Hello ,

I guess that you are talking about the Android implementation of the RadCalendar wit viewMode set to Year. In this case, this is done by design and the default month cell in Year mode will have more free space available to the left so that the sequent months won't overlap even when custom styles are applied.

To overcome the initial displacement to the right you can apply right margin with a value depending no your specific styling.
e.g.

<rc:RadCalendar viewMode="Year" marginRight="10"/>

The same can be achieved via CSS or code-behind (where you can choose to apply the logic only for Android)

Regards,
Nikolay Iliev
Progress Telerik

[Ericky]

Adding a margin sure would make it centered, but then the calendar view would not extend to the right end of the screen. I have tried adding padding properties or margin to yearviewstyle, but none of it is working.

 

And the viewMode is set to "Month", but on android, the viewMode changes to "Year" if you double tap the calendar. Is there any way to turn off this feature?

 

Thanks.

[Nick Iliev]

Hello ,

Indeed, you can not apply margin or padding to the inner cells in Year mode. Applying margin or padding to the  RadCalendar itself is the only way to achieve displacement. This is a limitation of the native Android cells which are in fact centered but the content inside them has a small displacement so that it will be clear which days belong to which month.

Regarding your second question in this ticket about preventing going into Year mode no double tap.
Yes, you can by using viewModeChanged event
e.g.

export function onViewModeChanged(args: calendarModule.CalendarViewModeChangedEventData) {
    console.log("onViewModeChanged oldValue: " + args.oldValue);
    console.log("onViewModeChanged newValue: " + args.newValue);
    console.log("onViewModeChanged object (RadCalendar): " + args.object);
    let calendar = <calendarModule.RadCalendar>args.object;
    calendar.viewMode = "Month";
}

While in your XML you are using the event like this

<rc:RadCalendar id="calendar" viewMode="{{ ViewMode }}" viewModeChanged="onViewModeChanged"/>

The above code will make the calendar automatically switch back to Month mode when the event is fired.

As a side note, please post different questions in different threads so we can keep track on the original issue and provide the best possible answers for different topics.

Regards,
Nikolay Iliev
Progress Telerik