CODEWITHSUNDEEP
reactjsreact-dnd
Alexander Solonik
Alexander Solonik

Reputation: 10230

How to integrate react DnD with react fullcalendar?

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.

Upvotes: 15

Views: 2821

Answers (3)

amadich
amadich

Reputation: 1

you can use package dnd

npm i react-beautiful-dnd enter image description here

Upvotes: 0

Maxiller
Maxiller

Reputation: 166

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.

Upvotes: 0

Sander De Wilde
Sander De Wilde

Reputation: 106

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.

Upvotes: 3

Related Questions