React-native-calendars: Disable down scroll in the week area of the Agenda list and snap to each week

[shamilovtim]

Issue Description

Downward scroll inside the Agenda causes user frustration and breaks the principle of least surprise. If the user is allowed to swipe down on the agenda in order to bring down the monthly view then the downward scroll interferes with user's swipe down touch event. Even if the swipe-down behavior were removed, the user still expects only to be able to scroll side to side within a weekly component, not down. Furthermore, the downward scrolling is not snapping to rows, which is causing user frustration.

Immediate fixes:

1. Each weekly row should be snapped to with an animation. The scroll should not be allowed to stop in between a row.
2. Swiping down anywhere in the week view will bring down a month view that covers the screen. Swiping down should no longer do anything else besides bringing down the month view.

Ideal functionality (distant future):

1. Rather than up and down, the weekly component should move left to right 7 elements at a time.
2. Scroll should be bi-directional and infinite left or right

[Grohden]

@shamilovtim not sure if it helps, but there's a horizontal prop on the Agenda that should let you control the scroll direction, you can probably pass horizontal on the jsx and it will make the calendar (not the weeks) scroll horizontally.

Not sure about Agenda but on ExpandableCalendar there's a issue with this prop (I've fixed it in my fork). The issue is that using horizontal there's no scroll down, so when you click on an arrow, it will change the week, but will not 'focus' on the week. My fix is when the horizontal prop is true, go to the next month instead of next week.

[shamilovtim]

No prop horizontal on Agenda according to the type definitions. What's important is that weeks don't go up and down. Weeks should go left and right.

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

[shamilovtim]

As a prototype here is Fantastical (proprietary, not RN) for iOS and Mac:

[shamilovtim]

@Grohden On your repo do you have most of the useful unmerged PRs from here merged? I was going to fork myself but if you're working on it then no need for me to double my efforts

[Grohden]

Typedefs can lie ( :'( ), but yeah, there's no prop on agenda :/ I've looked at the wrong source, sorry.

About the merged PR's: nope, my intention was to merge it here and them help to maintain the project since I rewrote stuff to ts. I can try to merge them tho..

About the gif prototype, the ExpandableCalendar is almost the same... but more buggy than agenda.

[Grohden]

Btw I'm also rewriting (entirely) this lib using hooks + date-fns.I will publish it if I find that it could be useful for people

[shamilovtim]

There are a lot of solutions in the PRs for existing problems in the repo but so many of them haven't been merged or closed that I'm not sure what's up

[pi18]

Can we just prevent vertical scrolling when the calendar is collapsed? So that it expands and scrolls once the bottom knob is clicked

[shamilovtim]

Yeah but unfortunately I don't foresee investing the time into a PR when there are 87 unmerged

[halk]

I noticed there is a typo here: https://github.com/wix/react-native-calendars/blob/master/src/agenda/index.js#L419

Renaming to scrollEnabled disabled the scrolling until the calendar list is opened

[ihsanktmr]

you can try my temporary solution https://github.com/wix/react-native-calendars/issues/998#issuecomment-570073538

[Inbal-Tish]

@shamilovtim If you need a week view calendar that scrolls left/right you can check out our ExpandableCalendar and the WeekCalendar.

[alindao-charles]

@Inbal-Tish Hi, I am having an issue with weekCalendar disabling the scroll event, is there a way to disable it? Thank you!

[chenei]

@shamilovtim @halk @Grohden @alindao-charles
Are you still having problems?
Closing the issue for now.