Revamp Drag and drop

[jquense]

ugh so i know i said i wasn't going to work on this, but I had some time this weekend and felt inspired at a simpler approach than what we've been doing.

A lot of the code changes here are unrelated core hygiene improvements, but they do help make the DnD implementation simpler.

Ultimately i realized that we already had most of the hard work done for doing a custom DnD implementation thanks to the event Selection logic. Rather than use a new library i've leveraged that to do direct calculations on where things should be in relation to the mouse

[jquense]

closes #891

[ehahn9]

you are a rockstar @jquense!

[arecvlohe]

😲 Awesome!

[dmitrykrylov]

@jquense when will that be released?

[sendajob]

How can we npm update the change?

[miltonmc]

@sendajob You can change your package.json to directly point to the repository on Github, to get the latest updates on it: https://docs.npmjs.com/files/package.json#github-urls

...
dependencies: {
    ...
      "react-big-calendar": "intljusticemission/react-big-calendar",
    ...
}

[sendajob]

When i do that the src folder is missing. any idea how to fix?

[miltonmc]

@sendajob can you provide some additional information, like if you are using yarn or npm, your OS, the exact error msg, a screenshot and/or your package.json?

You can try the following:

$ cd node_modules/react-big-calendar/
$ yarn
$ yarn build

[sendajob]

When i set dependency
"react-big-calendar": "intljusticemission/react-big-calendar",

the react-big-calendar/ in node_modules only has
node_modules/

no src no dist

[dmitrykrylov]

I tried to fetch dependency from github in the way @miltonmc proposed. It was successfully imported, but I got accessors.start is not a function error. I tried to debug it but haven't managed to fix the error and switched back to the current npm-indexed version.

[jquense]

we still need #921 which has a few bug fixes to this initial PR

[amazingmarvin]

@jquense I've been testing this and it works really well! Huge improvement. The only complaint I have is that the events lose their height while you're dragging them.

[jquense]

is that the events lose their height while you're dragging them.

hmm that doesn't sound right, in what context?

[amazingmarvin]

@jquense I am using the "day" Calendar.

import BigCalendar from "react-big-calendar";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
const Calendar = withDragAndDrop(BigCalendar, { backend: false });

        // Probably not that useful - let me know if there's something
        // that would be helpful to include
        <Calendar
          localizer={localizer}
          defaultView="day"
          defaultDate={moment(date).toDate()}
          views={["day"]}
          toolbar={false}
          step={dayIncrement}
          timeslots={timeslots}
          events={items}
          selectable={false}
          onEventResize={this.resize}
          onEventDrop={this.drop}
          resizable={true}
          allDayAccessor={this.getTaskWithoutTime}
          startAccessor={this.getTaskStartTime}
          endAccessor={this.getTaskEndTime}
          tooltipAccessor={this.getTooltip}
          components={{
            event: DayTask,
          }}
        />

BTW, I get the same behavior when I don't use the custom components.event. Also same behavior when I remove the { backend: false } in the call to withDragAndDrop.

[amazingmarvin]

OK, the problem is that I'm using startAccessor and endAccessor, whereas EventContainerWrapper doesn't:

    let end = dates.add(
      currentSlot,
      dates.diff(event.start, event.end, 'minutes'),
      'minutes'
    )

[archived-m]

@jquense Could you do a publish now that #921 has been merged? Thanks!

[nnals]

hello.
i would like to try the new drag'n'drop/resizing behavior but can't figure out how to add the master branch as a dependency to codesandbox. does it even work? or would i have to build first? in case it's possible could someone perhaps help me add the master branch to this codesandbox.
thank you very much!

[amazingmarvin]

@nnals The way I did this was: I forked the repo, ran npm run build, removed lib from .gitignore, pushed to my master, and then added "react-big-calendar": "git+https://github.com/YOU/react-big-calendar.git" to my package.json. Not sure if there's an easier way!

[miguelduarte42]

Hi,

I seem to have lost the ability to drag calendar items outside of the calendar. Is this by design?