ViewMode Year Layout not Centered

4 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 28 Jun Link to this post

    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.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 29 Jun Link to this post

    Hello Ericky,

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 29 Jun in reply to Nikolay Iliev Link to this post

    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.

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 29 Jun Link to this post

    Hello Ericky,

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top