1649 multiple resources

.size-snapshot.json

@@ -24,26 +24,26 @@
     }
   },
   "react-big-calendar.js": {
-    "bundled": 1583435,
-    "minified": 445376,
-    "gzipped": 137501
+    "bundled": 1583731,
+    "minified": 445245,
+    "gzipped": 137497
   },
   "react-big-calendar.min.js": {
-    "bundled": 283187,
-    "minified": 281738,
-    "gzipped": 88836
+    "bundled": 283419,
+    "minified": 281970,
+    "gzipped": 88896
   },
   "react-big-calendar.esm.js": {
-    "bundled": 199459,
-    "minified": 93011,
-    "gzipped": 24119,
+    "bundled": 199925,
+    "minified": 93298,
+    "gzipped": 24211,
     "treeshaked": {
       "rollup": {
-        "code": 66234,
+        "code": 66434,
         "import_statements": 1804
       },
       "webpack": {
-        "code": 70014
+        "code": 70218
       }
     }
   }

src/DayColumn.js

@@ -237,8 +237,11 @@ class DayColumn extends React.Component {
           continuesPrior={continuesPrior}
           continuesAfter={continuesAfter}
           accessors={accessors}
+          resource={this.props.resource}
           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,
   }
 
@@ -43,8 +44,11 @@ class EventWrapper extends React.Component {
     // 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

@@ -20,9 +20,17 @@ export default function Resources(resources, accessors) {
 
       events.forEach((event) => {
         const id = accessors.resource(event) || NONE
-        let resourceEvents = eventsByResource.get(id) || []
-        resourceEvents.push(event)
-        eventsByResource.set(id, resourceEvents)
+        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)
+        }
       })
       return eventsByResource
     },

stories/DragAndDrop.stories.js

@@ -1,7 +1,14 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 
-import { events, Calendar, Views, DragAndDropCalendar } from './helpers'
+import {
+  events,
+  resourceEvents,
+  resources,
+  Calendar,
+  Views,
+  DragAndDropCalendar,
+} from './helpers'
 import customComponents from './resources/customComponents'
 
 export default {
@@ -99,3 +106,20 @@ WithCustomEventWrapper.args = {
     eventWrapper: customComponents.eventWrapper,
   },
 }
+
+export const DraggableMultipleResources = Template.bind({})
+DraggableMultipleResources.storyName =
+  'draggable and resizable with multiple resource lanes'
+DraggableMultipleResources.args = {
+  defaultDate: new Date(),
+  defaultView: Views.DAY,
+  views: [Views.DAY, Views.WEEK, Views.AGENDA],
+  events: resourceEvents,
+  resources: resources,
+  resourceAccessor: 'resourceId',
+  resourceIdAccessor: 'id',
+  resourceTitleAccessor: 'name',
+  resizable: true,
+  onEventDrop: action('event dropped'),
+  onEventResize: action('event resized'),
+}

stories/demos/exampleCode/dndresource.js

@@ -15,7 +15,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,6 +77,9 @@ const resourceMap = [
 
 export default function DnDResource({ localizer }) {
   const [myEvents, setMyEvents] = useState(events)
+  const [copyEvent, setCopyEvent] = useState(true)
+
+  const toggleCopyEvent = useCallback(() => setCopyEvent((val) => !val), [])
 
   const moveEvent = useCallback(
     ({
@@ -90,14 +93,24 @@ export default function DnDResource({ localizer }) {
       if (!allDay && droppedOnAllDaySlot) {
         event.allDay = true
       }
+      if (Array.isArray(event.resourceId)) {
+        if (copyEvent) {
+          resourceId = [...new Set([...event.resourceId, resourceId])]
+        } else {
+          const filtered = event.resourceId.filter(
+            (ev) => ev !== event.sourceResource
+          )
+          resourceId = [...new Set([...filtered, resourceId])]
+        }
+      }
 
       setMyEvents((prev) => {
         const existing = prev.find((ev) => ev.id === event.id) ?? {}
         const filtered = prev.filter((ev) => ev.id !== event.id)
         return [...filtered, { ...existing, start, end, resourceId, allDay }]
       })
     },
-    [setMyEvents]
+    [setMyEvents, copyEvent]
   )
 
   const resizeEvent = useCallback(
@@ -125,6 +138,16 @@ export default function DnDResource({ localizer }) {
         <strong>
           Drag and Drop an "event" from one resource slot to another.
         </strong>
+        <div style={{ margin: '10px 0 20px 0' }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={copyEvent}
+              onChange={toggleCopyEvent}
+            />
+            Keep copy of dragged "source" event in its original resource slot.
+          </label>
+        </div>
       </DemoLink>
       <div className="height600">
         <DragAndDropCalendar

stories/demos/exampleCode/resource.js

@@ -24,7 +24,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,

stories/helpers/index.js

@@ -89,3 +89,42 @@ export const backgroundEvents = [
     allDay: false,
   },
 ]
+
+export const resourceEvents = [
+  {
+    title: 'event 1',
+    start: moment().startOf('day').add(1, 'hours').toDate(),
+    end: moment().startOf('day').add(2, 'hours').toDate(),
+    allDay: false,
+    resourceId: 1,
+  },
+  {
+    title: 'event 2',
+    start: moment().startOf('day').add(3, 'hours').toDate(),
+    end: moment().startOf('day').add(4, 'hours').toDate(),
+    allDay: false,
+    resourceId: [1, 2],
+  },
+  {
+    title: 'event 3',
+    start: moment().startOf('day').add(1, 'hours').toDate(),
+    end: moment().startOf('day').add(3, 'hours').toDate(),
+    allDay: false,
+    resourceId: 3,
+  },
+]
+
+export const resources = [
+  {
+    id: 1,
+    name: 'Resource One',
+  },
+  {
+    id: 2,
+    name: 'Resource Two',
+  },
+  {
+    id: 3,
+    name: 'Resource Three',
+  },
+]