Duplicate events when resizing & resize element bug

[ksk6794]

Do you want to request a feature or report a bug?

Report a bug

What's the current behavior?

This is reproduced when there are no events on the default day. Click "Back" and click on any event, then try to resize it.

Bug 1: The resize element (=) reacts to click one by one (works -> does not work -> works -> ...) Bug 2: The event is duplicated.

https://codesandbox.io/s/react-big-calendar-events-duplication-5p39x

What's the expected behavior?

The resize element always reacts. Events are not duplicated.

[christianpatrick]

Hey @ksk6794,

I had a few minutes and tried to duplicate what you're experiencing. I was able to fix both of those "bugs" when I changed Line 31 to: const CalendarComponent = Dnd;

Adding the react-dnd and withDragAndDrop together will try to override each other since they effectively do the same thing. So when I disabled react-dnd and react-dnd-html5-backend, everything seemed to work fine. I hope this helps!

[ksk6794]

Hey @christianpatrick, I removed react-dnd and react-dnd-html5-backend, but the problem is still reproducing.

[christianpatrick]

Not sure how I wasn't duplicating it earlier consistently, but now I can totally see what you were referring to.

When I changed the defaultView prop to the string "day", it began allowing drag and drop to work every time. For the duplication issue, there's an example here showing the props to add for it to respect the resource column it's in.

I applied those changes to a fork of yours, and it seemed to do the trick: https://codesandbox.io/s/react-big-calendar-events-duplication-vx6ui

Let me know if that doesn't work but hope it points you in the right direction! :smiley:

[ksk6794]

I replaced Line 2 in events.js: dt.setDate(dt.getDate() - 1); and it repeated again. Yes, if there are events on the date that the component is rendered for the first time, the problem does not reproduce.

[christianpatrick]

That's interesting! I had simply updated that to current day for simplicity. Can you take another peek at this fork and see if it's now working correctly? https://codesandbox.io/s/react-big-calendar-events-duplication-vx6ui

I ended up adding in state to allow move and resize functionality and all seems working now.

[ksk6794]

No, the problem is still present. ( To reproduce this, reopen or refresh the sandbox and repeat the same steps that I described.

[christianpatrick]

Do you mind providing some extra detail to what I am missing? In the sandbox I forked, all of your steps have been applied.

[ksk6794]

I checked your fork https://codesandbox.io/s/react-big-calendar-events-duplication-vx6ui, but the result is the same as in all the previous ones.

Click "Back", click on an event, then try to resize.

[christianpatrick]

@ksk6794, thanks for the details. Unfortunately for me, I'm seeing full functionality in both Firefox and Chrome using the same steps. I'm not sure how else to help, but hope you find the solution that works for you! :crossed_fingers:

[ksk6794]

@christianpatrick, It's amazing that this works for you. Checked in Firefox and Safari - the problem is present everywhere.

Yes, for myself, I solved this problem by putting a condition on the calendar render (a kind of crutch =)). When switching the date, the condition changes to true/false and the component is rendered again and the problem does not reproduce.

Obviously, there is a problem with the calendar and judging by the issue - developers encounter a problem from time to time.