How to integrate react DnD with react fullcalendar?

Question

I have the following simple demo for a drag and drop component using React DnD plugin.

Card.js (DropSource)

import React, { Component } from 'react';
import { DragSource } from 'react-dnd';


const ItemTypes = {
    CARD: 'card'
};

const cardSource = {
    beginDrag(props) {
      return {  };
    }
}

function collect(connect, monitor) {
    return {
       connectDragSource : connect.dragSource(),
       connectDragPreview: connect.dragPreview(),
       isDragging : monitor.isDragging()
    } 
}

class Card extends Component {

    render() {
        const { connectDragSource , isDragging } = this.props;

        return connectDragSource( 
          <div style={{
            opacity : isDragging ? 0.5 : 1,
            height: '50px',
            width: '50px',
            backgroundColor: 'orange',
          }}>
            &#9822;
          </div>
        );
      }

}

export default DragSource(ItemTypes.CARD, cardSource , collect)(Card);

Box.js (Droptarget)

import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';


const boxTarget = {
    canDrop(props) {

    },

    drop(props) {

    }
};

function collect(connect, monitor) {
    return {
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    };
}

const ItemTypes = {
    CARD: 'card'
};


class Box extends Component {

    render() {
        const { connectDropTarget, isOver, canDrop } = this.props;

        return connectDropTarget(
          <div style={{
            position: 'relative',
            width: '200px',
            height: '200px',
            background: canDrop ? '#ff0000' : '#eee'
          }}>
              { this.props.children }
          </div>
        );
    }

}

export default DropTarget(ItemTypes.CARD, boxTarget, collect)(Box);

simpleDrag.js

import React, { Component } from 'react';

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import CARD from './card';
import BOX from './box';

class simpleDrag extends Component {

    render() {
        return(
            <div>
                <BOX />
                <CARD/>
            </div>    
        ); 
    }

} 

export default DragDropContext(HTML5Backend)(simpleDrag);

And then ofcourse i use the simpleDrag element in my app.js to render and i have a working DnD example , now my question is how can i use DnD along site fullcalender.js ? I.E. say i want to make each day cell in the full calender a dropable target how do i do that ?

Fullcalender.js

React DnD

The above code can be found in my github repo HERE.

You can take insights from [`react-big-calendar`](https://github.com/intljusticemission/react-big-calendar). This calendar is inspired by Fullcalendar and already have integration with `react-dnd`. [Here's a working](http://intljusticemission.github.io/react-big-calendar/examples/index.html) drag & drop demo of `react-big-calendar` + there's the source. — Jordan Enev, Jun 06 '18 at 20:43
@JordanEnev thanks , that what i was looking into , but i wanted to know how to drag and drop an external event , trying to do that right now. — Alexander Solonik, Jun 07 '18 at 05:41
[Here's a working example](https://fullcalendar.io/docs/external-dragging-demo) with an external event(but using jQuery draggable). So according to the example, you have to find a way to get `DropSource` dom node element and add to it a `data` attribute with some Fullcalendar properties. Therefore on successful drop (Fullcalendar `drop` handler), you have to remove `DropSource` somehow, because it will be added to the Fullcalendar. — Jordan Enev, Jun 07 '18 at 08:51
@Dupocas buddy i did't , iam sure there is a solution , but i've not worked on it — Alexander Solonik, Oct 24 '19 at 07:07
Did you look into using Fullcalendar's [External Event Dragging](https://fullcalendar.io/docs/external-dragging)? Check out their live demo. Perhaps this supplies the "make each day call in the full calendar a dropable target" functionality you are looking for. If so, I could try to write an answer that integrates with your solution. — Charles Kornoelje, Dec 03 '20 at 14:28

score 3 · Answer 1 · answered Feb 02 '21 at 13:44

You can integrate fullcalendar and react-dnd using the ThirdPartyDraggable interface provided by fullcalendar (docs).

However, it is important to notice that fullcalendar reacts to mouse events to implement its drag and drop. react-dnd provides the a html5-backend, but they don't play together nicely as the HTML5 Drag and Drop API disables mouse events in favour of drag events.

You should thus use an alternative backend that uses those mouse events. E.g. this one.

I implemented a sandbox with an example implementation.

score 0 · Answer 2 · answered Nov 09 '21 at 05:52

for the record, hooks (which React is about in functional components) cannot be used in class-based components (https://reactjs.org/warnings/invalid-hook-call-warning.html).

You might want to consider rewriting your Card and Box as RFCs instead of RCCs.

How to integrate react DnD with react fullcalendar?

2 Answers2