Add resizing and dragging events

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 535473,
-    "minified": 165496,
-    "gzipped": 51033
+    "bundled": 536336,
+    "minified": 165961,
+    "gzipped": 51120
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 463447,
-    "minified": 143731,
-    "gzipped": 45351
+    "bundled": 464134,
+    "minified": 144076,
+    "gzipped": 45392
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 219707,
-    "minified": 99686,
-    "gzipped": 24772,
+    "bundled": 220577,
+    "minified": 100058,
+    "gzipped": 24882,
     "treeshaked": {
       "rollup": {
-        "code": 63234,
-        "import_statements": 1412
+        "code": 63685,
+        "import_statements": 1372
       },
       "webpack": {
-        "code": 66700
+        "code": 66874
       }
     }
   }

src/BackgroundCells.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import { notify } from './utils/helpers'
@@ -14,6 +13,7 @@ class BackgroundCells extends React.Component {
     this.state = {
       selecting: false,
     }
+    this.ref = React.createRef()
   }
 
   componentDidMount() {
@@ -39,15 +39,16 @@ class BackgroundCells extends React.Component {
       date: currentDate,
       components: { dateCellWrapper: Wrapper },
       localizer,
+      resourceId,
     } = this.props
     let { selecting, startIdx, endIdx } = this.state
     let current = getNow()
 
     return (
-      <div className="rbc-row-bg">
+      <div className="rbc-row-bg" ref={this.ref}>
         {range.map((date, index) => {
           let selected = selecting && index >= startIdx && index <= endIdx
-          const { className, style } = getters.dayProp(date)
+          const { className, style } = getters.dayProp(date, resourceId)
 
           return (
             <Wrapper key={index} value={date} range={range}>
@@ -71,13 +72,13 @@ class BackgroundCells extends React.Component {
   }
 
   _selectable() {
-    let node = findDOMNode(this)
+    let node = this.ref.current
     let selector = (this._selector = new Selection(this.props.container, {
       longPressThreshold: this.props.longPressThreshold,
     }))
 
     let selectorClicksHandler = (point, actionType) => {
-      if (!isEvent(findDOMNode(this), point)) {
+      if (!isEvent(this.ref.current, point)) {
         let rowBox = getBoundsForNode(node)
         let { range, rtl } = this.props
 
@@ -128,7 +129,7 @@ class BackgroundCells extends React.Component {
     selector.on('beforeSelect', box => {
       if (this.props.selectable !== 'ignoreEvents') return
 
-      return !isEvent(findDOMNode(this), box)
+      return !isEvent(this.ref.current, box)
     })
 
     selector.on('click', point => selectorClicksHandler(point, 'click'))

src/Calendar.js

@@ -580,7 +580,7 @@ class Calendar extends React.Component {
      * position may break the calendar in unexpected ways.
      *
      * ```js
-     * (date: Date) => { className?: string, style?: Object }
+     * (date: Date, resourceId) => { className?: string, style?: Object }
      * ```
      */
     dayPropGetter: PropTypes.func,

src/DateContentRow.js

@@ -3,7 +3,6 @@ import getHeight from 'dom-helpers/height'
 import qsa from 'dom-helpers/querySelectorAll'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 
 import BackgroundCells from './BackgroundCells'
 import EventRow from './EventRow'
@@ -17,6 +16,7 @@ class DateContentRow extends React.Component {
     super(...args)
 
     this.slotMetrics = DateSlotMetrics.getSlotMetrics()
+    this.ref = React.createRef()
   }
 
   handleSelectSlot = slot => {
@@ -28,7 +28,7 @@ class DateContentRow extends React.Component {
   handleShowMore = (slot, target) => {
     const { range, onShowMore } = this.props
     let metrics = this.slotMetrics(this.props)
-    let row = qsa(findDOMNode(this), '.rbc-row-bg')[0]
+    let row = qsa(this.ref.current, '.rbc-row-bg')[0]
 
     let cell
     if (row) cell = row.children[slot - 1]
@@ -47,13 +47,13 @@ class DateContentRow extends React.Component {
 
   getContainer = () => {
     const { container } = this.props
-    return container ? container() : findDOMNode(this)
+    return container ? container() : this.ref.current
   }
 
   getRowLimit() {
     let eventHeight = getHeight(this.eventRow)
     let headingHeight = this.headingRow ? getHeight(this.headingRow) : 0
-    let eventSpace = getHeight(findDOMNode(this)) - headingHeight
+    let eventSpace = getHeight(this.ref.current) - headingHeight
 
     return Math.max(Math.floor(eventSpace / eventHeight), 1)
   }
@@ -152,7 +152,7 @@ class DateContentRow extends React.Component {
     }
 
     return (
-      <div className={className} role="rowgroup">
+      <div className={className} role="rowgroup" ref={this.ref}>
         <BackgroundCells
           localizer={localizer}
           date={date}

src/DayColumn.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import Selection, { getBoundsForNode, isEvent } from './Selection'
@@ -23,6 +22,7 @@ class DayColumn extends React.Component {
     super(...args)
 
     this.slotMetrics = TimeSlotUtils.getSlotMetrics(this.props)
+    this.dayColumnRef = React.createRef()
   }
 
   componentDidMount() {
@@ -122,7 +122,7 @@ class DayColumn extends React.Component {
 
     let selectDates = { start: startDate, end: endDate }
 
-    const { className, style } = dayProp(max)
+    const { className, style } = dayProp(max, resource)
 
     const DayColumnWrapperComponent =
       components.dayColumnWrapper || DayColumnWrapper
@@ -131,6 +131,7 @@ class DayColumn extends React.Component {
       <DayColumnWrapperComponent
         date={date}
         style={style}
+        innerRef={this.dayColumnRef}
         className={clsx(
           className,
           'rbc-day-slot',
@@ -248,11 +249,14 @@ class DayColumn extends React.Component {
   }
 
   _selectable = () => {
-    let node = findDOMNode(this)
+    let node = this.dayColumnRef.current
     const { longPressThreshold, localizer } = this.props
-    let selector = (this._selector = new Selection(() => findDOMNode(this), {
-      longPressThreshold: longPressThreshold,
-    }))
+    let selector = (this._selector = new Selection(
+      () => this.dayColumnRef.current,
+      {
+        longPressThreshold: longPressThreshold,
+      }
+    ))
 
     let maybeSelect = box => {
       let onSelecting = this.props.onSelecting
@@ -310,7 +314,7 @@ class DayColumn extends React.Component {
     }
 
     let selectorClicksHandler = (box, actionType) => {
-      if (!isEvent(findDOMNode(this), box)) {
+      if (!isEvent(this.dayColumnRef.current, box)) {
         const { startDate, endDate } = selectionState(box)
         this._selectSlot({
           startDate,
@@ -328,7 +332,7 @@ class DayColumn extends React.Component {
     selector.on('beforeSelect', box => {
       if (this.props.selectable !== 'ignoreEvents') return
 
-      return !isEvent(findDOMNode(this), box)
+      return !isEvent(this.dayColumnRef.current, box)
     })
 
     selector.on('click', box => selectorClicksHandler(box, 'click'))

src/DayColumnWrapper.js

@@ -1,11 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const DayColumnWrapper = ({ children, className, style }) => {
+const DayColumnWrapper = ({ children, className, style, innerRef }) => {
   return (
-    <div className={className} style={style}>
+    <div className={className} style={style} ref={innerRef}>
       {children}
     </div>
   )
 }
 
+DayColumnWrapper.propTypes = {
+  innerRef: PropTypes.object.isRequired,
+}
+
 export default DayColumnWrapper

src/Month.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import chunk from 'lodash/chunk'
@@ -28,6 +27,7 @@ class MonthView extends React.Component {
     this._bgRows = []
     this._pendingSelection = []
     this.slotRowRef = React.createRef()
+    this.ref = React.createRef()
     this.state = {
       rowLimit: 5,
       needLimitMeasure: true,
@@ -69,7 +69,7 @@ class MonthView extends React.Component {
   }
 
   getContainer = () => {
-    return findDOMNode(this)
+    return this.ref.current
   }
 
   render() {
@@ -84,6 +84,7 @@ class MonthView extends React.Component {
         className={clsx('rbc-month-view', className)}
         role="table"
         aria-label="Month View"
+        ref={this.ref}
       >
         <div className="rbc-row rbc-month-header" role="row">
           {this.renderHeaders(weeks[0])}
@@ -290,7 +291,7 @@ class MonthView extends React.Component {
     this.clearSelection()
 
     if (popup) {
-      let position = getPosition(cell, findDOMNode(this))
+      let position = getPosition(cell, this.ref.current)
 
       this.setState({
         overlay: { date, events, position, target },

src/TimeGrid.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
 import clsx from 'clsx'
 import * as animationFrame from 'dom-helpers/animationFrame'
 import React, { Component } from 'react'
-import { findDOMNode } from 'react-dom'
 import memoize from 'memoize-one'
 
 import DayColumn from './DayColumn'
@@ -23,6 +22,7 @@ export default class TimeGrid extends Component {
 
     this.scrollRef = React.createRef()
     this.contentRef = React.createRef()
+    this.gutterRef = React.createRef()
     this._scrollRatio = null
   }
 
@@ -83,10 +83,6 @@ export default class TimeGrid extends Component {
     }
   }
 
-  gutterRef = ref => {
-    this.gutter = ref && findDOMNode(ref)
-  }
-
   handleSelectAlldayEvent = (...args) => {
     //cancel any pending selections so only the event click goes through.
     this.clearSelection()
@@ -260,7 +256,7 @@ export default class TimeGrid extends Component {
         >
           <TimeGutter
             date={start}
-            ref={this.gutterRef}
+            innerRef={this.gutterRef}
             localizer={localizer}
             min={localizer.merge(start, min)}
             max={localizer.merge(start, max)}
@@ -293,7 +289,7 @@ export default class TimeGrid extends Component {
     }
     this.measureGutterAnimationFrameRequest = window.requestAnimationFrame(
       () => {
-        const width = getWidth(this.gutter)
+        const width = getWidth(this.gutterRef.current)
 
         if (width && this.state.gutterWidth !== width) {
           this.setState({ gutterWidth: width })

src/TimeGridHeader.js

@@ -14,7 +14,7 @@ class TimeGridHeader extends React.Component {
     notify(this.props.onDrillDown, [date, view])
   }
 
-  renderHeaderCells(range) {
+  renderHeaderCells(range, resourceId) {
     let {
       localizer,
       getDrilldownView,
@@ -29,7 +29,7 @@ class TimeGridHeader extends React.Component {
       let drilldownView = getDrilldownView(date)
       let label = localizer.format(date, 'dayFormat')
 
-      const { className, style } = dayProp(date)
+      const { className, style } = dayProp(date, resourceId)
 
       let header = (
         <HeaderComponent date={date} label={label} localizer={localizer} />
@@ -164,7 +164,7 @@ class TimeGridHeader extends React.Component {
                 range.length <= 1 ? ' rbc-time-header-cell-single-day' : ''
               }`}
             >
-              {this.renderHeaderCells(range)}
+              {this.renderHeaderCells(range, id)}
             </div>
             <DateContentRow
               isAllDay

src/TimeGutter.js

@@ -36,10 +36,10 @@ export default class TimeGutter extends Component {
   }
 
   render() {
-    const { resource, components, getters } = this.props
+    const { resource, components, getters, innerRef } = this.props
 
     return (
-      <div className="rbc-time-gutter rbc-time-column">
+      <div className="rbc-time-gutter rbc-time-column" ref={innerRef}>
         {this.slotMetrics.groups.map((grp, idx) => {
           return (
             <TimeSlotGroup
@@ -65,6 +65,7 @@ TimeGutter.propTypes = {
   getNow: PropTypes.func.isRequired,
   components: PropTypes.object.isRequired,
   getters: PropTypes.object,
+  innerRef: PropTypes.object.isRequired,
 
   localizer: PropTypes.object.isRequired,
   resource: PropTypes.string,