title: How to integrate react DnD with react fullcalendar?
body: <p>I have the following simple demo for a drag and drop component using React DnD plugin.</p>
  
  <p><strong>Card.js</strong> (DropSource)</p>
  
  <pre><code>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( 
            &lt;div style={{
              opacity : isDragging ? 0.5 : 1,
              height: '50px',
              width: '50px',
              backgroundColor: 'orange',
            }}&gt;
              &amp;#9822;
            &lt;/div&gt;
          );
        }
  
  }
  
  export default DragSource(ItemTypes.CARD, cardSource , collect)(Card);
  </code></pre>
  
  <p><strong>Box.js</strong> (Droptarget)</p>
  
  <pre><code>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(
            &lt;div style={{
              position: 'relative',
              width: '200px',
              height: '200px',
              background: canDrop ? '#ff0000' : '#eee'
            }}&gt;
                { this.props.children }
            &lt;/div&gt;
          );
      }
  
  }
  
  export default DropTarget(ItemTypes.CARD, boxTarget, collect)(Box);
  </code></pre>
  
  <p><strong>simpleDrag.js</strong></p>
  
  <pre><code>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(
              &lt;div&gt;
                  &lt;BOX /&gt;
                  &lt;CARD/&gt;
              &lt;/div&gt;    
          ); 
      }
  
  } 
  
  export default DragDropContext(HTML5Backend)(simpleDrag);
  </code></pre>
  
  <p>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 ?</p>
  
  <p><a href="https://www.npmjs.com/package/fullcalendar-reactwrapper" rel="noreferrer">Fullcalender.js</a></p>
  
  <p><a href="https://react-dnd.github.io/react-dnd/docs-overview.html" rel="noreferrer">React DnD</a></p>
  
  <p>The above code can be found in my github repo <a href="https://github.com/gautamz07/action-snowball" rel="noreferrer">HERE</a>.</p>