Building a Timetable view

ionic-v1
1

Hey there,

I’m building a Timetable screen for a festival app. I’m using ion-scroll and ion-content to scroll the x axis of the screen, so you can scroll left to right to see more events.

This works, check out: http://codepen.io/squrler/pen/xihmk

However! In this particular app, the amount of venues is so large that some of the venues would be below the viewport. So I would now also like to make this timetable scrollable vertically.

However, when you do so, the venues won’t scroll- obviously, as they’re outside of the ion-scroll component with position: fixed

I’m looking for a way to build up this view that would allow the screen to be scrolled vertically and horizontally, with the labels for the venues staying in the right place. Is this possible at all with the current ion-scroll / ion-content implementations?

2

For something thing like this, I’d suggest looking into some calendar directives.

http://angular-ui.github.io/ui-calendar/

(this is without diving into anything yet, but I’ll take a look :smile: )

3

Hey @mhartington, thanks for the link! Looking at the module (quite impressive btw) I don’t see it supporting the type of view that I’m trying to build in my example. Things like calculating the width of an element based on the length or timezones I got covered on my end. The issue is more one of ion-scroll not allowing elements within it to be fixed. So I have to take those elements out of the ion-scroll and place them over the ion-scroll with position fixed. But that then makes it impossible to scroll them vertically :frowning:

Any suggestions to deal with this (multiple ion-scrolls?) would be greatly appreciated.