Alburkerk Alburkerk - 2 months ago 19
HTML Question

Infinite Scroll + Calculation of how many has been scrolled

I am developing an ionic app and had some trouble recently in making some functionalities.
First of all, I am using ionic 1, thus I am using AngularJS 1.

My goal is to create a calendar on ionic. That seems pretty classic, but most of the existing templates are displaying a month, and you have to touch a button or slide to the right or something to go over the next month. It seems a pretty bad UX to me.

I want to make a calendar which would allow someone to display dynamically and vertically every day from every month (only two -for instance- are displayed at the same time cause of screen size).

An Image For You

Note : Don't mind the colors, it is for additional functionalities.

Here on the picure I can just scroll down and October appears as August disappears (French month names on the picture sorry).

I looked on many templates how calendars were done in Javascript, and the simplest way seems to be the dynamic generation of the html as a string (That seemed dirty to me at first view but after looking forward I found this elegant somehow). Consequently, I though I just had to generate the html of let's say 7-8 months, center on the 2 months in the middle and change it dynamically each time the user scroll.

My big question is : It is possible to calculate exactly how many the user scrolled down with ionic-scroll ?
If I know he scrolled down the distance equivalent to two months, I know I have to calculate two more months in future and drop those who are too far.

Does that solution even make sense ? Or does anyone have an idea of how to do this ?

Will be glad to hear every comment on this. If any further information is required, I will try to answer as fast as possible.

Answer

Seems like you can just do this with https://ionicframework.com/docs/api/directive/collectionRepeat. If you set the correct height for each month this should just work out of the box.

<ion-content>
  <div collection-repeat="month in months"
    item-height="200px">
    //month template
  </div>
</ion-content>