onDragEvent vertical scrolling

[Salmankhan033]

When I drag the event then the vertical/horizontal scrolling not working.
How to enable vertical scrolling when dragging or dropping events?

[pdpino]

Something like:

• Week-view shows in the screen between 8am and 10pm
• User starts dragging an event from 6pm (and wants to drop at 6am)
• User drags the event up (or down) until the end of the screen
• The agenda should scroll vertically, while the user still does not drop the event, to allow dropping the event at 6am

Is this what you want?

I'm working on improving the overall drag and drop, fixing bugs and making it smoother. I'll try to consider this as well

[Salmankhan033]

If one person changes their event from 6 pm to 6 am then how it will scroll the screen to drag and drop events directly?

[Salmankhan033]

can you show me the code from where you false the scroll?

[pdpino]

@Salmankhan033 I think I'm not understanding correctly.

1. about your question

can you show me the code from where you false the scroll?

In our code we do not disable the vertical or horizontal scrolling while an event is being dragged. The behavior is a result of how Views work.

2. Can you please confirm if you meant something like this? (example with google calendar). If the answer is no, please provide a visual example

• Week-view shows agenda between 12pm and 12am
• User starts dragging an event from 6pm (and wants to drop at 6am)
• User drags the event up until the end of the screen
• The agenda should scroll vertically, while the user still does not drop the event, to allow dropping the event at 6am

[Salmankhan033]

@Salmankhan033 I think I'm not understanding correctly.

1. about your question

can you show me the code from where you false the scroll?

In our code we do not disable the vertical or horizontal scrolling while an event is being dragged. The behavior is a result of how Views work.

2. Can you please confirm if you meant something like this? (example with google calendar). If the answer is no, please provide a visual example

• Week-view shows agenda between 12pm and 12am
• User starts dragging an event from 6pm (and wants to drop at 6am)
• User drags the event up until the end of the screen
• The agenda should scroll vertically, while the user still does not drop the event, to allow dropping the event at 6am

Yes, I want such a type of scrolling when dragging the event.
how i will implement it in your calendar?

[pdpino]

how i will implement it in your calendar?

Cannot be done with the current code, AFAIK.
We will try to add it, after PR #175 with new libraries

[TheTushar2696]

@pdpino Any update on this feature

[pdpino]

@TheTushar2696 I'm not currently working on this

[TheTushar2696]

Hi @pdpino
Any plans of picking it up in the near future?

[Salmankhan033]

I have done it
By long press on events and copy it.
Then place/past it in your specific place

Hi @pdpino Any plans of picking it up in the near future?

[TheTushar2696]

I have done it By long press on events and copy it. Then place/past it in your specific place

Hi @pdpino Any plans of picking it up in the near future?

Hi,
Didn't get the approach, request you to please elaborate a bit on this

[TheTushar2696]

@Salmankhan033 ^^

[Salmankhan033]

I have done it By long press on events and copy it. Then place/past it in your specific place

Hi @pdpino Any plans of picking it up in the near future?

Hi, Didn't get the approach, request you to please elaborate a bit on this

onEventLongPress={(_event) => { setEditableEvent(_event) }

    then   onGridClick={(pressEvent, startHour, date) => {...}
    Then pass the date and editable events to API
    it will update the API

[TheTushar2696]

@Salmankhan033 Not sure how is this working, sorry to bother you but can you please share a working code snippet,
Does this makes the screen scroll as we drag the event?

Thanks in advance

[Salmankhan033]

@Salmankhan033 Not sure how is this working, sorry to bother you but can you please share a working code snippet, Does this makes the screen scroll as we drag the event?

Thanks in advance

Yes sure.I can send you the code.
welcome

[pdpino]

Any plans of picking it up in the near future?

@TheTushar2696 yes. The main delay is that after some quick research I still do not know how to implement it

(though it should be possible with react-native-gesture-handler)

[pdpino]

Update: I've been working on this. Have not been able to fully solve it, but I have this minimal example for now:

update-2022-07-12_10.45.16.mp4

(mainly using react-native-reanimated)

[TheTushar2696]

@pdpino , Thanks for the update, please lmk if there is any progress or you need any kind of help

[SwikarBhattarai]

any progress ? @pdpino
@TheTushar2696 did you find a solution?

[pdpino]

@SwikarBhattarai I'm stuck with this feature, any help is appreciated

I have a solution like the comment above:

• the user drags an event to the (top or bottom) edge --> the view is scrolled by an offset
• then, to scroll the view again, the user needs to drag the event again

We want something more natural, like the example from google calendar above:

• the user drags an event to the edge --> the view is scrolled continuously, until the user drags the event away from the edge

[SwikarBhattarai]

@pdpino can you share me your solution.

[pdpino]

@SwikarBhattarai or anyone else, lmk if you have any code or ideas on how to solve this with react-native-reanimated v2 (e.g. maybe other app that solves a similar problem)

[SwikarBhattarai]

@pdpino can you share me your current solution because its impossible to drag and drop from 6am to 6pm like situations.

[pdpino]

can you share me your solution.

@SwikarBhattarai do you want it for deployment? I'd have to clean some stuff and send a PR

If you want to develop, check this branch: https://github.com/pdpino/react-native-week-view/tree/feature/wip/174-drag-and-scroll

• The drag-scrolling syncronization is implemented in src/context/DragEvent.js
• the current solution is only implemented scrolling up. Implementing for scrolling down is analogous (but I want to fix the behavior first)
• Note: the branch is ahead of master by a bunch of other features/fixes

[pdpino]

Here is a video of the current solution in branch https://github.com/pdpino/react-native-week-view/tree/feature/wip/174-drag-and-scroll:

update-wv-2022-08-25_09.51.13.mp4

[SwikarBhattarai]

@pdpino thats great. When are you pushing these??

[pdpino]

@SwikarBhattarai before releasing, I think we want a more natural interaction, like the google calendar example

I'm stuck with this right now, help is appreciated.

[SwikarBhattarai]

@pdpino share the repo link i will try

[pdpino]

@SwikarBhattarai this branch in my fork: https://github.com/pdpino/react-native-week-view/tree/feature/wip/174-drag-and-scroll, the drag-scroll code is in src/context/DragEvent.js

[SwikarBhattarai]

@pdpino did you push recent changes to the branch?? when we drag its crashing in ios simulator

[pdpino]

@SwikarBhattarai The branch feature/wip/174-drag-and-scroll has diverged with master. It has more features and is lacking some recent changes. I haven't tested in iOS (can't access an emulator right now)

If you provide details of the crash maybe I can help

[gabcollet]

@pdpino Any update on this feature?

[pdpino]

Sorry, no updates yet. Will get back to this feature and vertical-pinch after current PRs are resolved