Calendar Overlaying Page

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

    Posted 28 Jun Link to this post

    Hello.

     

    When using RadCalendar in "Inline" mode, it overlays the rest of the page when pushed up.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 29 Jun Link to this post

    Hello Ericky,

    We have tried to reproduce the issue but to no avail as the provided information is not enough.
    Can you clarify what do you mean by "pushing up"? We have tried to modify the examples that are using inline mode here and here by adding additional components before the rRadCalendar but no "pushing up" was observed.

    Please send is code snippet or sample project that can reproduce the issue.
    If sending only code snippet, please clarify on what platform the issue is observed (iOS, Android or both) and with what type of project (Angular or NativeScript Core).

    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 Link to this post

    Sorry for the confusion, what I meant is the default behavior where the calendar animates its top half and down half from the selected date.

     

    Is there any way to stop the top half from overlaying the rest of the app? Maybe make it work like in iOS where only the bottom half is animated when the inline events pop up.

     

    If you look at the screenshot from the previous post you can see the calendar overlaying the navigation bar.

     

    Thanks.

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 29 Jun Link to this post

    Hi Ericky,

    Unfortunately, the screenshot is not enough to fully understand how the overlaying is happening.

    I have modified this example but no overlaying is observed
    <StackLayout>
        <Button text="some button" tap=""></Button>
        <Label text="some label" textWrap="true"> </Label>
        <RadCalendar [eventSource]="eventSource" [eventsViewMode]="eventsViewMode">     </RadCalendar>
    </StackLayout>

    In the case above when we set inline as a mode, neither the button or the label are getting pushed and the calendar is not over layout when an inline event is visible.
    If your case is different from the above please send us more information including the layout structure used in the page with the RadCalendar.


    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.
  5. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

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

    Ah, I have it inside a router-outlet.

     

    calendar.html

    <StackLayout id="calendar">
      <RadCalendar id="calendar-widget" viewMode="Month" selectionMode="Single" eventsViewMode="Inline" selectionShape="None"
        [eventSource]="calendarEvents" [yearViewStyle]="yearViewStyle" [monthViewStyle]="monthViewStyle" (inlineEventSelected)="onInlineEventSelected($event)"></RadCalendar>
    </StackLayout>

     

    layout.html

    <GridLayout>
      <GridLayout>
        <StackLayout id="application" orientation="vertical">
          <ink-actionbar [search]="true"></ink-actionbar>
          <ink-navigation></ink-navigation>
          <router-outlet name="layoutoutlet"></router-outlet>
        </StackLayout>
      </GridLayout>
      <ink-loading></ink-loading>
    </GridLayout>

     

    app.component.html

    <page-router-outlet></page-router-outlet>
  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 29 Jun Link to this post

    Hi again Ericky,

    Now that we know that you are using router-outlet in your application structure we were able to confirm the issue and it is closely related to an issue you have reported a few days ago via ticket 1115943.
    The issue is caused by the way the Angular router-outlet works and during our previous discussion I have logged this issue as a bug in the nativescript-angular repository
    Currently, the only workaround would be to structure your content so that the content would come after the RadCalendar (so it won't "push" anything) or use page-router-outlet.

    Please keep track on the logged issue where out Angular developers will update the information once a possible solution or fix is provided.


    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