Drop external events onto calendar?

[MinhNguyen41092]

Hi everyone. I've developed an app that requires dragging and dropping events from an external list onto the calendar. I've made it work in the old version using React-DnD. But in the new version it was ditched for another technology that I still can't find out what it is. So I'd like to ask is it possible to drop an outside event onto the calendar by using the new DnD approach? If yes could you give me a hint? Thank you very much.

[jquense]

ditched for another technology that I still can't find out what it is.

no other library we do the drag and drop "in house", all the code for it is in the dnd addon. At the moment there is no first class API for dropping events from an external element, but i'd be open to adding one if anyone has a good idea for it

[szagoret]

Hi everyone. I've developed an app that requires dragging and dropping events from an external list onto the calendar. I've made it work in the old version using React-DnD. But in the new version it was ditched for another technology that I still can't find out what it is. So I'd like to ask is it possible to drop an outside event onto the calendar by using the new DnD approach? If yes could you give me a hint? Thank you very much.

For which version (old one) did you implemented?

[MinhNguyen41092]

@zagoret v0.19.1

[szagoret]

@MinhNguyen41092 Thanks for your response.
I implemented also for version 0.19.0 and it works fine.
Any update about the last version, still doesn't work external dnd?

[MinhNguyen41092]

@zagoret we found a way to work around it. We wrap the calender with react-dnd drop target and try to calculate the drop position externally. It's not pretty but atleast it works

[jquense]

Btw happy to add an API for this. It should be as simple as handling onDrop events and passing back the, already caclulated pointer to slot position

[RoslerWS]

I've tried to accomplish this with a method similar to @MinhNguyen41092. except by passing in a custom dateCellWrapper component as a component prop to the calendar that is wrapped with react-dnd DropTarget. Unfortunately, it doesn't work for date rows containing events, because the date cell wrapper wraps the 'rbc-day-bg' cells in the 'rbc-row-bg' row, whereas the 'rbc-row-content' row is what contains the events..... hence the drop target isn't detected because there is something on top of it. If I bring the background cell to the forefront, then the built-in react-big-calendar drag and drop no longer works for these cells, because it is underneath....

...And I can't wrap the actual 'rbc-event-content' cells, because they only exist if there are events on that date cell (and such a wrapper doesn't exist anyway).

[kamry-bowman]

Any hints on how to go about adding this? It's a functionality we need, but I'm not super familiar with how dnd is being handled in this library since it's a custom approach.

[francescocerri]

@zagoret we found a way to work around it. We wrap the calender with react-dnd drop target and try to calculate the drop position externally. It's not pretty but atleast it works

Can you add an example about this?

[kamry-bowman]

@francescocerri

This is the route we ended up taking, even though the implementation is a bit "hacky".

Here is the DnDCal wrapped as a react-dnd drop-target:

const DnDCal = withDragAndDrop(Calendar)

function dropCollect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget()
  }
}

const click = (x, y) => {
  const eventConfig = {
    bubbles: true,
    button: 0,
    clientX: x,
    clientY: y,
    pageX: window.scrollLeft + x,
    pageY: window.scrollRight + y,
    view: window,
    which: 1,
    x: x,
    y: y
  }

  let mouseDown = new window.MouseEvent('mousedown', eventConfig)
  let mouseUp = new window.MouseEvent('mouseup', eventConfig)
  const elem = document.elementFromPoint(x, y)
  elem.dispatchEvent(mouseDown)
  elem.dispatchEvent(mouseUp)
}

const dropSpec = {
  drop(props, monitor, component) {
    const { x, y } = monitor.getClientOffset()
    // dispatch a DOM click event at the place of dropping, so react-big-cal
    // library can take over event creation
    click(x, y)
  }
}

class DropCal extends Component {
  state = { hoursModal: false }

  toggleModal = e => {
    this.setState(state => ({ hoursModal: !state.hoursModal }))
  }

  render() {

    return connectDropTarget(
      <div>
        <DnDCal
         {...this.prop}
        />
      </div>
    )
  }
}

export default DropTarget('SHIFT', dropSpec, dropCollect)(DropCal)

And then we wired up the dragStart for react-dnd to put an outside resource on state, and passed onSelectSlot callback to the the calendar. The onSelectSlot callback checks to see if anything was being dragged on state, and if it was, it uses that dragged resource's info to create the new event.

 createEvent = ({ start, end }) => {
    const { draggedEmployee } = this.state
    if (draggedEmployee) {
        // fires a redux event
        this.props.createEvent(
            { employee: draggedEmployee, start },
         )
        this.setState({ draggedEmployee: null })
      }
    }
  }

There's more unrelated stuff going on than that in the component, but here's a link to the repo. https://github.com/Lambda-School-Labs/labs9-employee-scheduler/tree/master/client/src/components/Scheduler

[rchancey]

hey nice.. does this still work well? A lot of us need this and this seems the most current attempt?

[kamry-bowman]

It still works but it's definitely a hack

Unfortunately, it doesn't work when dropping on an existing event.
All I want is my unplanned events to be dropped from outside the calendar :(
Should I downgrade to v19?
Anybody got any ideas?