Slider has wrong width because of pagetransition

[Simbaclaws]

I'm having a bit of a inconvenience here,

Basically I have a list of items, and once an item is clicked a new page will open with the calendar inside of it.

My problem is that I've made a page transition that starts with a specific height and width and animates to full height and width of the page with the calendar that should be displayed.

The ion slider that's inside of MonthViewComponent which is inside of CalendarComponent basically calculates the width of the slider based on the very moment this page transition starts and therefore sets a wrong width to the individual slides of the calendar.

I'm trying to access this slider using ViewChild on CalendarComponent, but since it's a nested component inside a nested component I'm unable to access the slider to call slider.resize() on it.

Is there any way I can access this ion-slider from within CalendarComponent somehow, so I can resize it to it's proper size after the page transition ends?

I've already tried importing MonthViewComponent but this didn't seem to work... It tells me my ViewChild is undefined, obviously because I'm not using it in my template, but rather CalendarComponent... I'm talking ofcourse about the #monthSlider inside of MonthViewComponent. Which is accessed as a slider through @ViewChild('monthSlider') slider:Slides;

Yours sincerely, Simbaclaws

[twinssbc]

@Simbaclaws I'm not sure if resize function could solve your problem. Check the source code below, it seems this resize method does nothing. https://github.com/ionic-team/ionic/blob/master/src/components/slides/slides.ts

resize() {
    if (this._init) {

    }
  }

I think maybe there are two ways worth to try.

1. Do not display the calendar until the page transition completes. For example, add some ngIf logic to control the visibility of the calendar component.
2. The ion-slides uses Swiper API behind scenes, maybe you could directly call Swiper API to achieve your requirement. You could get the swiper element by using $('.swiper-container').swiper. http://idangero.us/swiper/api/#.Wdzqv2iCzIU

[Simbaclaws]

Dear @twinssbc

Thanks for the great response,

I've solved my issue by using ionViewDidEnter() and then setting the values for the events and current date of the calendar, so that it gets initialized after the page transition completes. Now it works flawlessly.

Thanks for the help :+1:

[Simbaclaws]

Dear @twinssbc,

I seem to have this issue also when trying to change my screen orientation from portrait to landscape. The calendar doesn't change its width according to the screen size. This is without a ion-slide. Just a regular page does this as well. Only when I change the month does it change the calendar's size to the correct size.

Would it be an idea to have some sort of update function implemented inside the calendar that resizes the calendar to the specific width of its container?

I've already tried changing the sourceEvents and current date of the calendar, but this doesn't change the width of the calendar to it's parent container.

Please let me know what would be the best option to achieve this?

Thank you for your time.

[Simbaclaws]

How exactly can I target #monthSlider inside the monthview so I can call slider.update() on it? Apparently all that needs to happen is call the ion-slides update function in order to update the slide's width. I'm doing that with other ion slides as well, but whenever I try to access the month view inside of the calendar I have no idea how to access it's values.

Is there a way to expose the slider.update function from ionSlides inside this calendar?

[Simbaclaws]

Dear @twinssbc

I created a pull request to allow for updating the ion-slides inside the month, week and day views. This way users are able to manually call the update method from calendar in order to update the slides (aka make them resize to it's containers) whenever they feel like.

https://github.com/twinssbc/Ionic2-Calendar/pull/556

[twinssbc]

@Simbaclaws the PR looks great. I will do some test for it, then merge it. Thanks.

[Simbaclaws]

Note:

Apparently changing the orientation of the screen on smaller mobile devices seems to work for me. When I use an ipad to rotate the screen, does it not want to update the calendar size.

[twinssbc]

@Simbaclaws merged your PR and published version 0.6.6