wix
Agenda: allow to scroll past the initial selected day?
Hi,
Thanks for this great project
Let's take the example agenda that is published on expo
The initial day is selected={'2017-05-16'}
The loading function is:
loadItems(day) {
setTimeout(() => {
for (let i = -15; i < 85; i++) {
const time = day.timestamp + i * 24 * 60 * 60 * 1000;
// load items for that time
// ...
}
}
To my understanding, the purpose of this function is to load new items data as the user is changing date or scrolling. It is also triggered initially on initial day.
In this demo, we can see the purpose of loading next 85 days, and previous 15 days.
Yet, even if 15 days before the initial day selected={'2017-05-16'} have been loaded in state, the UI does not allow to scroll back in time. The only way to browse items of a past day is to open the knob and select a date. In my app I don't want the knob so it means there's no easy way to access the past items.
I don't know what could be a good solution to this problem. I guess rendering items lazily at the top after mount would mess-up with scroll position. For me a good enough solution would be that every items provided on mount could be rendered initially, and for otherwise keep current behavior.
What do you think?
Hi, ideally I wanted to implement full scrolling backwards and forward, however there are RN limitations with such solution. There were some thoughts to make available past scrolling for preloaded period, but in order of consistency scrolling always stops on selected calendar date. Maybe this could be improved.
I am too facing this issue. I've already loaded more than 500 items and still user needs to select date using knob to see the previous items. Any timeline for this enhancement? Thank you.
Would really love this enhancement, please let us know if this is in the pipeline!
Sorry, but there are no short-term plans to solve this. There is some chance that it could be fixed this year though.
Guys, I'm thinking about actually implementing this improvement, that's why I'm starting this discussion.
Do you guys think it makes sense to pass in openDate as a prop an into the calendarList component (that it will use to "center" the scroll) ?
Of course i'm interested. I don't know if a solution would be to have a larger "pre-loaded" list and display or not display a row as needed.
I have created a day view similar to google calendar, with "swipe effect" and I used a "carrousel strategy". It would be another option... Always load the previous week, current and later, and only update the data
I believe https://facebook.github.io/react-native/docs/flatlist.html#initialscrollindex is how we can make this work. Work might make this a priority for me, stay tuned.
I, too, think this is a pretty huge feature. Makes so much sense. Would love if someone could make it happen!
If you're incrementally loading data as the user scrolls up in the past, you'd be adding items to the top of the list, and that would mess up the scroll position. Bi-directional infinite scrolling is quite challenging.
Moving forward:
Unless you have constructive feedback or a solution to give, please add a "THUMBS UP" to the original issue instead creating a comment with just +1
The extra comments are just noise for the contributors and will only slow them down.
Thanks!
Personally I don't think infinite past scrolling is even needed.
If we could at least set a currentDate, then set pastScrollRange to any number, I would expect the calendar open up to the currentDate, but be able to scroll to x months previously until you get back to the pastScrollRange value.
Does that make sense? Is this a different request, or similar enough?
To me the simple solution is that we could pass down renderHeader and renderFooter to the list (reservation-list component), so we can create components like LoadPrevItemButton and LoadNextItemButton to manage the infinite scroll.
I feel like this is a very simple, yet crucial feature.
If we could at least set a currentDate, then set pastScrollRange to any number, I would expect the calendar open up to the currentDate, but be able to scroll to x months previously until you get back to the pastScrollRange value.
For those who's interested in a very hacky solution when you at least have some amount of preload days I'm using this workaround:
const iso = date => date.format("YYYY-MM-DD");
const realInitialDate = iso(moment());
const pseudeInitialDate = iso(moment().add(-1, "week"));
...
<Agenda
ref={r -> r.chooseDay(realInitialDate, true) }
selected={pseudeInitialDate}
/>
If your views are heavy you may need to wait until the layout gets resolved before choosing a day.
@ptmt Doesn't work for me. I get an error about clone not being available.
since this is the most commented open issue, I think it will be nice to add a description in the document to tell new user that the agenda is unidirectional.
Damn, this is the only thing stopping me from using this library in our production app :/
I ended up writing my own to fill my current production need.
On August 7, 2018 at 9:01:10 AM, Blanco Alberto ([email protected]) wrote:
Damn, this is the only thing stopping me from using this library in our production app :/
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wix/react-native-calendars/issues/80#issuecomment-411047547, or mute the thread https://github.com/notifications/unsubscribe-auth/AKKvQcdX-DtLbx55E16hx0JgHhGW8kNrks5uOY-VgaJpZM4ONVIj .