Calendar Overlaying Page

[Ericky]

Hello.

 

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

[Nick Iliev]

Hello ,

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

[Ericky]

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.

[Nick Iliev]

Hi ,

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

[Ericky]

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>

[Nick Iliev]

Hi again ,

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