1649 multiple resources

CHANGELOG.md

@@ -63,17 +63,15 @@
 
 ## [0.38.4](https://github.com/jquense/react-big-calendar/compare/v0.38.3...v0.38.4) (2022-01-04)
 
-
 ### Bug Fixes
 
-* **sass:** Reference distributed folder in SASS compile ([#2091](https://github.com/jquense/react-big-calendar/issues/2091)) ([20502f3](https://github.com/jquense/react-big-calendar/commit/20502f334a3c9ce62a1322a88d897b9afa66ee23)), closes [#2086](https://github.com/jquense/react-big-calendar/issues/2086)
+- **sass:** Reference distributed folder in SASS compile ([#2091](https://github.com/jquense/react-big-calendar/issues/2091)) ([20502f3](https://github.com/jquense/react-big-calendar/commit/20502f334a3c9ce62a1322a88d897b9afa66ee23)), closes [#2086](https://github.com/jquense/react-big-calendar/issues/2086)
 
 ## [0.38.3](https://github.com/jquense/react-big-calendar/compare/v0.38.2...v0.38.3) (2022-01-04)
 
-
 ### Bug Fixes
 
-* Correct typo in custom view example ([267629b](https://github.com/jquense/react-big-calendar/commit/267629b5d253b5247b2cd2071764e6bb86c4d3a5))
+- Correct typo in custom view example ([267629b](https://github.com/jquense/react-big-calendar/commit/267629b5d253b5247b2cd2071764e6bb86c4d3a5))
 
 ## [0.22.1](https://github.com/jquense/react-big-calendar/compare/v0.22.0...v0.22.1) (2019-09-13)
 

commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional']
-}
+  extends: ['@commitlint/config-conventional'],
+}

examples/bundle.js

@@ -2245,7 +2245,7 @@
               ('(' === (o = o || '()')[0]
                 ? this.isAfter(r, n)
                 : !this.isBefore(r, n)) &&
-                (')' === o[1] ? this.isBefore(a, n) : !this.isAfter(a, n))
+              (')' === o[1] ? this.isBefore(a, n) : !this.isAfter(a, n))
             )
           }),
           (hn.isSame = function(e, t) {
@@ -7541,7 +7541,9 @@
           null != e &&
           !r(e)
         ) ||
-        i.test(e) || !a.test(e) || (null != t && e in Object(t))
+        i.test(e) ||
+        !a.test(e) ||
+        (null != t && e in Object(t))
       )
     }
   },
@@ -26315,8 +26317,8 @@ object-assign
         ? 0 === r.type
         : !o &&
           2 < t.length &&
-            ('o' === t[0] || 'O' === t[0]) &&
-            ('n' === t[1] || 'N' === t[1])) ||
+          ('o' === t[0] || 'O' === t[0]) &&
+          ('n' === t[1] || 'N' === t[1])) ||
         ((function(e, t, n, o) {
           if (
             null == t ||
@@ -28861,7 +28863,8 @@ object-assign
         ;(i = l),
           (a.shared.pending = null),
           null !== (s = e.alternate) &&
-            null !== (s = s.updateQueue) && (s.baseQueue = l)
+            null !== (s = s.updateQueue) &&
+            (s.baseQueue = l)
       }
       if (null !== i) {
         s = i.next
@@ -28999,7 +29002,8 @@ object-assign
         ? e.shouldComponentUpdate(o, a, i)
         : !t.prototype ||
             !t.prototype.isPureReactComponent ||
-            !Fo(n, o) || !Fo(r, a)
+            !Fo(n, o) ||
+            !Fo(r, a)
     }
     function ga(e, t, n) {
       var o = !1,
@@ -38544,14 +38548,15 @@ object-assign
   function(e, t, n) {
     ;(function(e, o) {
       var r
-      /**
-       * @license
-       * Lodash <https://lodash.com/>
-       * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
-       * Released under MIT license <https://lodash.com/license>
-       * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
-       * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
-       */ ;(function() {
+        /**
+         * @license
+         * Lodash <https://lodash.com/>
+         * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+         * Released under MIT license <https://lodash.com/license>
+         * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+         * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+         */
+      ;(function() {
         var a = 'Expected a function',
           i = '__lodash_placeholder__',
           l = [
@@ -41105,7 +41110,9 @@ object-assign
                 null != e &&
                 !Zi(e)
               ) ||
-              X.test(e) || !R.test(e) || (null != t && e in fe(t))
+              X.test(e) ||
+              !R.test(e) ||
+              (null != t && e in fe(t))
             )
           }
           function ua(e) {
@@ -47843,7 +47850,8 @@ object-assign
           (t.equals = function(e) {
             return (
               !(!this.isValid || !e.isValid) &&
-              this.s.equals(e.s) && this.e.equals(e.e)
+              this.s.equals(e.s) &&
+              this.e.equals(e.e)
             )
           }),
           (t.intersection = function(t) {

examples/demos/dndresource.js

@@ -12,7 +12,7 @@ const events = [
     title: 'Board meeting',
     start: new Date(2018, 0, 29, 9, 0, 0),
     end: new Date(2018, 0, 29, 13, 0, 0),
-    resourceId: 1,
+    resourceId: [1, 2],
   },
   {
     id: 1,
@@ -77,9 +77,40 @@ class Dnd extends React.Component {
     super(props)
     this.state = {
       events: events,
+      isCopyingMode: true,
     }
 
     this.moveEvent = this.moveEvent.bind(this)
+    this.handleChangeMode = this.handleChangeMode.bind(this)
+  }
+
+  handleChangeMode(e) {
+    this.setState({
+      isCopyingMode: e.target.checked,
+    })
+  }
+
+  modifyResource(oldResourceId, sourceResource, newResourceId, isCopyingMode) {
+    //new array with all present Ids
+    let tempArr = [...oldResourceId]
+
+    if (isCopyingMode) {
+      //add the new Id to the array
+      tempArr.push(newResourceId)
+    } else {
+      if (sourceResource) {
+        //replace old with new
+        const index = tempArr.indexOf(sourceResource)
+
+        if (index !== -1) {
+          tempArr[index] = newResourceId
+        }
+      }
+    }
+
+    // delete duplicates in the array
+    let unique = Array.from(new Set(tempArr))
+    return unique
   }
 
   moveEvent({ event, start, end, resourceId, isAllDay: droppedOnAllDaySlot }) {
@@ -94,7 +125,22 @@ class Dnd extends React.Component {
       allDay = false
     }
 
-    const updatedEvent = { ...event, start, end, resourceId, allDay }
+    const relatedEvent = events[idx]
+
+    //new event obj with updated resource
+    const tempResId = this.modifyResource(
+      relatedEvent.resourceId,
+      relatedEvent.sourceResource,
+      resourceId,
+      this.state.isCopyingMode
+    )
+    const updatedEvent = {
+      ...event,
+      start,
+      end,
+      resourceId: tempResId,
+      allDay,
+    }
 
     const nextEvents = [...events]
     nextEvents.splice(idx, 1, updatedEvent)
@@ -104,9 +150,11 @@ class Dnd extends React.Component {
     })
   }
 
-  resizeEvent = (resizeType, { event, start, end }) => {
+  resizeEvent = ({ event, start, end }) => {
     const { events } = this.state
 
+    console.log('events', events)
+
     const nextEvents = events.map(existingEvent => {
       return existingEvent.id == event.id
         ? { ...existingEvent, start, end }
@@ -120,21 +168,36 @@ class Dnd extends React.Component {
 
   render() {
     return (
-      <DragAndDropCalendar
-        selectable
-        localizer={this.props.localizer}
-        events={this.state.events}
-        onEventDrop={this.moveEvent}
-        resizable
-        resources={resourceMap}
-        resourceIdAccessor="resourceId"
-        resourceTitleAccessor="resourceTitle"
-        onEventResize={this.resizeEvent}
-        defaultView="day"
-        step={15}
-        showMultiDayTimes={true}
-        defaultDate={new Date(2018, 0, 29)}
-      />
+      <>
+        <div style={{ padding: '40px', background: '#dbdbdb' }}>
+          <label>Copy Event?</label>
+          <input
+            type="checkbox"
+            id="copyMode"
+            defaultChecked={this.state.isCopyingMode}
+            onChange={this.handleChangeMode}
+          />
+          <p>active: {this.state.isCopyingMode ? 'CopyMode' : 'MoveMode'}</p>
+        </div>
+        <DragAndDropCalendar
+          selectable
+          localizer={this.props.localizer}
+          events={this.state.events}
+          onEventDrop={this.moveEvent}
+          onDragStart={args => console.log('dragStart', args)}
+          onSelectSlot={args => console.log('onSelectSlot', args)}
+          onSelectEvent={args => console.log('select', args)}
+          resizable
+          resources={resourceMap}
+          resourceIdAccessor="resourceId"
+          resourceTitleAccessor="resourceTitle"
+          onEventResize={this.resizeEvent}
+          defaultView="day"
+          step={15}
+          showMultiDayTimes={true}
+          defaultDate={new Date(2018, 0, 29)}
+        />
+      </>
     )
   }
 }

examples/demos/resource.js

@@ -23,7 +23,7 @@ const events = [
     title: 'Team lead meeting',
     start: new Date(2018, 0, 29, 8, 30, 0),
     end: new Date(2018, 0, 29, 12, 30, 0),
-    resourceId: 3,
+    resourceId: [2, 3],
   },
   {
     id: 11,

src/DayColumn.js

@@ -237,8 +237,11 @@ class DayColumn extends React.Component {
           continuesPrior={continuesPrior}
           continuesAfter={continuesAfter}
           accessors={accessors}
+          resource={this.props.resource} //added to have the resource also in the TimeGrid
           selected={isSelected(event, selected)}
-          onClick={e => this._select(event, e)}
+          onClick={e =>
+            this._select({ ...event, sourceResource: this.props.resource }, e)
+          }
           onDoubleClick={e => this._doubleClick(event, e)}
           isBackgroundEvent={isBackgroundEvent}
           onKeyPress={e => this._keyPress(event, e)}

src/addons/dragAndDrop/EventWrapper.js

@@ -18,6 +18,7 @@ class EventWrapper extends React.Component {
     continuesAfter: PropTypes.bool,
     isDragging: PropTypes.bool,
     isResizing: PropTypes.bool,
+    resource: PropTypes.number,
     resizable: PropTypes.bool,
   }
 
@@ -38,13 +39,24 @@ class EventWrapper extends React.Component {
     this.context.draggable.onBeginAction(this.props.event, 'resize', 'RIGHT')
   }
   handleStartDragging = e => {
+    // if (e.button === 0) {
+    //   let extendedEvent = this.props.event
+    //   extendedEvent.sourceResource = this.props.resource
+    //   this.context.draggable.onBeginAction(this.props.event, 'move')
+    // } else {
+
+    // }
+
     if (e.button !== 0) return
     // hack: because of the way the anchors are arranged in the DOM, resize
     // anchor events will bubble up to the move anchor listener. Don't start
     // move operations when we're on a resize anchor.
     const isResizeHandle = e.target.className.includes('rbc-addons-dnd-resize')
-    if (!isResizeHandle)
+    if (!isResizeHandle) {
+      let extendedEvent = this.props.event
+      extendedEvent.sourceResource = this.props.resource
       this.context.draggable.onBeginAction(this.props.event, 'move')
+    }
   }
 
   renderAnchor(direction) {

src/utils/Resources.js

@@ -10,20 +10,33 @@ export default function Resources(resources, accessors) {
     },
 
     groupEvents(events) {
+      // console.log("groupEvents",events);
       const eventsByResource = new Map()
 
       if (!resources) {
+        // console.log("no resources");
         // Return all events if resources are not provided
         eventsByResource.set(NONE, events)
         return eventsByResource
       }
 
       events.forEach(event => {
         const id = accessors.resource(event) || NONE
-        let resourceEvents = eventsByResource.get(id) || []
-        resourceEvents.push(event)
-        eventsByResource.set(id, resourceEvents)
+
+        //split up if it is an array
+        if (Array.isArray(id)) {
+          id.forEach(item => {
+            let resourceEvents = eventsByResource.get(item) || []
+            resourceEvents.push(event)
+            eventsByResource.set(item, resourceEvents)
+          })
+        } else {
+          let resourceEvents = eventsByResource.get(id) || []
+          resourceEvents.push(event)
+          eventsByResource.set(id, resourceEvents)
+        }
       })
+      // console.log("eventsByResource", eventsByResource);
       return eventsByResource
     },
   }