Skip to content

Fix jumpy dragging when snapDuration !== slotDuration#622

Open
jfrancos wants to merge 1 commit into
fullcalendar:v7-devfrom
jfrancos:patch-1
Open

Fix jumpy dragging when snapDuration !== slotDuration#622
jfrancos wants to merge 1 commit into
fullcalendar:v7-devfrom
jfrancos:patch-1

Conversation

@jfrancos

Copy link
Copy Markdown

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @fullcalendar/timegrid@7.0.0-beta.4 for the project I'm working on.

with

snapDuration={{ minutes: 15 }}
slotDuration={{ minutes: 30 }}

Before: dragging an event up or down is jumpy (up 30 minutes, down 15 minutes, etc) and mouse gets out of sync:

Screen.Recording.2025-01-25.at.1.08.48.PM.mov

After: smooth and mouse in sync:

Screen.Recording.2025-01-25.at.1.01.30.PM.mov

Here is the diff that solved my problem:

diff --git a/node_modules/@fullcalendar/timegrid/internal.js b/node_modules/@fullcalendar/timegrid/internal.js
index ac5854a..b7cf5d8 100644
--- a/node_modules/@fullcalendar/timegrid/internal.js
+++ b/node_modules/@fullcalendar/timegrid/internal.js
@@ -684,7 +684,7 @@ class TimeGridCols extends DateComponent {
         const slatTop = slatIndex * slatHeight;
         const partial = (positionTop - slatTop) / slatHeight; // floating point number between 0 and 1
         const localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
-        const snapIndex = slatIndex + localSnapIndex * snapsPerSlot;
+        const snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
         const time = addDurations(dateProfile.slotMinTime, multiplyDuration(snapDuration, snapIndex));
         const start = dateEnv.add(cell.date, time);
         const end = dateEnv.add(start, snapDuration);

Maybe this is helpful for fullcalendar/fullcalendar#4865? Or maybe it breaks something. Haven't tested beyond that it seems to fix my own issue.

Thank you for your hard work!

This issue body was partially generated by patch-package.

Hi! 👋 
      
Firstly, thanks for your work on this project! 🙂

Today I used [patch-package](https://github.com/ds300/patch-package) to patch `@fullcalendar/timegrid@7.0.0-beta.4` for the project I'm working on.

with
```
snapDuration={{ minutes: 15 }}
slotDuration={{ minutes: 30 }}
```
Before: dragging an event up or down is jumpy (up 30 minutes, down 15 minutes, etc) and mouse gets out of sync:

https://github.com/user-attachments/assets/a83f6bc6-c011-4539-a4ad-2d1071edb401

After: smooth and mouse in sync:

https://github.com/user-attachments/assets/da9308c3-7d51-4286-9788-01da286c517a

Here is the diff that solved my problem:

```diff
diff --git a/node_modules/@fullcalendar/timegrid/internal.js b/node_modules/@fullcalendar/timegrid/internal.js
index ac5854a..b7cf5d8 100644
--- a/node_modules/@fullcalendar/timegrid/internal.js
+++ b/node_modules/@fullcalendar/timegrid/internal.js
@@ -684,7 +684,7 @@ class TimeGridCols extends DateComponent {
         const slatTop = slatIndex * slatHeight;
         const partial = (positionTop - slatTop) / slatHeight; // floating point number between 0 and 1
         const localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
-        const snapIndex = slatIndex + localSnapIndex * snapsPerSlot;
+        const snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
         const time = addDurations(dateProfile.slotMinTime, multiplyDuration(snapDuration, snapIndex));
         const start = dateEnv.add(cell.date, time);
         const end = dateEnv.add(start, snapDuration);
```

Maybe this is helpful for fullcalendar/fullcalendar#4865?
Or maybe it breaks something.  Haven't tested beyond that it seems to fix my own issue.

Thank you for your hard work!

<em>This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).</em>
@jfrancos

Copy link
Copy Markdown
Author

@jfrancos

Copy link
Copy Markdown
Author

@acerix @arshaw Can you give some feedback on this fix for fullcalendar/fullcalendar#4865?

Happy to open a PR in https://github.com/fullcalendar/fullcalendar/pulls too, if that's the right thing to do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant