React-native-calendars: Agenda scroll up doesn't roll back to previous week

[Rc85]

When I scroll my Agenda down, it will roll over to the next week when you hit a date that is in that week. But then when I try to scroll up, it doesn't roll back to the previous week and any previous week events are not visible anymore.

Have to go into Calendar List and select the date in previous week.

[ItsNoHax]

This is the reason I didn't start using this library a couple months ago, pity this isn't fixed yet. It might seem small but it complete ruins the Agenda UX feeling

[tautvilas]

@Rc85 could you add a gif/video?

[ItsNoHax]

It's not really a bug? But it's a crucial feature for Agenda, click on any date and try to scroll back to a day before, it wont allow you.

[bertucci13]

this feature is really important for us. Please fixed asap.

[abeltje1]

I'm also experiencing this problem and I've made a GIF:

[geniuscd]

Yes this is crucial feature, its not actually a bug.
maybe some workaround will be to scroll to the selected date rather than redrawing the agenda. or #80
BTW how to scroll to specific date manually?

[slorber]

@ItsNoHax @bertucci13 open source does not work like that. If you need a critical feature, do your job and contribute with a PR, start your own fork, create your own lib or implement this feature yourself. People don't work for you for free.

[abeltje1]

@slorber You're right, but it's a little strange that the authors of this library do not acknowledge this issue anywhere - it seems right now like the Agenda component is simply unfinished, and I do not understand why that is not clearly communicated on the GH page. If it'd be clearly communicated there, maybe we can start a joint project to implement this feature. That's the reason @ItsNoHax and @bertucci13 are not so satisfied, I assume.

Bottom line: open source definitely is made by the community, but the authors of a library should also help the community by stating clearly which essential features are currently missing.

Let's do that! Does everyone agree that this is an essential feature of every agenda?

[tautvilas]

Currently the features we have in this lib are aligned to what we use ourselves in Wix company. Regarding bi-directional scrolling not sure if it is even possible to implement an infinite version of it with current RN version. If the past scrolling will not be infinite then it will still have a 'bug' that scrolling is stuck at certain day. The compromise solution I see today is to make the past scrolling stuck on first day of week or on first day on month.

Solutions and PRs to solve this are always welcome.

[yuval-yaari]

@tautvilas could you please elaborate on why an infinite list wouldn't be possible?
I'm not an expert, but it's easy to find examples of infinite scrolling in RN.
Would that be a limitation with react-native-calendars?

[tautvilas]

One-directional infinite spinning is possible (and implemented in agenda). If you could give two-direction infinite loading examples it would be really interesting to look at them. At least when I tried implement it with ~RN.40 prepending items to list view caused jagged behavior, losing scroll position and rerendering of all list items (very choppy experience).

[slorber]

remember that if you feel the doc does not mention correctly the limits of the library, you are free to submit a PR to the doc so that future readers are able to know these limits. Contributing to doc is generally welcome.

[slorber]

It's complicated to provide bi-directionnal scrolling experience in a performant and scalable way (loads of items) and without messing up with scroll position problems after new data comes into view. If you feel you know how to solve this correctly, don't hesitate to share your knowledge.

[mindhivefi]

I've made an fork of Agenda with infinite scroll, but unfortunately it works only with Android right now. I did love the ui of this component and ended up showing it to my client before I was aware of this issue. So I ended up to make it work on my case. Currently my client only needs Android version, so this is enough for me right now. But I am willing to participate if we are going to make this work on both platforms.

My repo can be found from here The version is still work in progress and needs testing, but the basic functionality seems to work. I will continue testing within my client case.

The reason for supporting only Android is that react-native-recyclerview-list -component, which this uses internally, only works with Android. One solution would be to make that work on both platforms or then to find some other component where to start with this.

The altered Agenda component is there with name InfiniteAgenda. Hive a try. Maybe this will some you to someone. :)

[tautvilas]

Hi, thanks for comment. Unfortunately react-native-recyclerview-list is a native dep and at the moment we want to keep this lib js-only

[mindhivefi]

Yes. So I thought. And it makes sense. I just wanted to share mine, if someone else is in my situation. :)

[yuval-yaari]

So I'm not really sure this is the same issue, but basically I'm rendering a small amount of items, say, between May 10th 2018 and May 29th 2018.
When clicking a date in the week row, it works as expected, jumps to the selected date and allows me to scroll back up to a previous date, which again, is already rendered.
However, when opening the calendar using the knob and doing the same thing, say, picking May 15th, I can no longer scroll back to the week before that, it's stuck there for some odd reason...
Expected behavior: for the calendar day selector to behave the same as day-of-week selector.
Thanks in advance for any suggestions or help!

[Reidweb1]

I just submitted a PR that keeps all the data around so you can scroll up and down. I'm not sure if the PR will be accepted since it may be going against the intended behavior of the Agenda component. If anyone is interested in trying this as a fix or offering feedback you can check out my fork here - https://github.com/meshhq/react-native-calendars

[rickcha]

@abeltje1 How did you make agenda date show as a row? Thanks in advance!

[rickcha]

Gotcha. found styling in /node_modules/react-native-calendars/src/agenda/reservation-list/style.js

Please correct me if I am wrong. Thank you !

[2021debaisen]

@rickcha I am facing the same question. Did you ever figure this out?

[shamilovtim]

If it's any help to the participants here Fantastical has an Agenda component that does this

[jbouaziz]

@shamilovtim do you have a link to it?

[shamilovtim]

I don't currently need this functionality in my project but when I brought the Agenda component into my project I thought it was bugged and I searched through the issues to try to resolve it. I stumbled on this thread and saw the claim that this can't be built which is bizarre. If it weren't common or couldn't be built, users wouldn't be accustomed to it working this way. Users expect what they're used to -- which is why devs (who are also users) who bring this component into their project think it's broken.

[jmasaki24]

@shamilovtim is that a React Native app?

[shamilovtim]

Here is a component where weeks go left and right:
https://github.com/FaiChou/react-native-slideable-calendar-strip

Here is another one:
https://github.com/BugiDev/react-native-calendar-strip

Discussion continued in #951