I would like to make an component which looks and works like that but is virtual and can be swiped into the past and future infinitly any idea on how to aproach such an component or anyone else interested in it?
You could use the Swiper embedded within Framework7, with 3 slides and infinite loop: slide 1 shows content for current week, slide 2 for next week, and slide 3 for previous week.
On slideNextTransitionEnd events, you update slide [(i + 1) % 3] so it shows the next week. And on slidePreviousTransitionEnd, you update the slide number [(i - 1) % 3] so it show the previous week.
This way, you have an infinite scroll of slides, and only three slides in the DOM.
And for the visual aspect, you can reuse the class already used by the calendar component of framework7. It will help achieve consistency with the rest of the app, and the less work to do the better! 
I would love to achieve something like that, i dont think that just 3 slides will be enough, everyday will have to be a slide i guess.
I am trying to make the slide in the center to be the “selected” Date so you only have to swipe through the dates to change it
On your gif, the slide seems to go week by week. So I believe 3 slides are enough, with the 7 days of the week in each slide.
But if you want to be able to slide day per day, then yes, you need at least 9 slides (the 7 visible and one at each end), and if you want to enable fast scrolling with inertia, then you will probably need even more slides to achieve a satisfying effect.
Still, the method I described should do the trick easily enough.
1 Like