feat: pass resource prop to DayColumnWrapper; Updated docs and storybook

src/DayColumn.js

@@ -139,6 +139,7 @@ class DayColumn extends React.Component {
           selecting && 'rbc-slot-selecting'
         )}
         slotMetrics={slotMetrics}
+        resource={resource}
       >
         {slotMetrics.groups.map((grp, idx) => (
           <TimeSlotGroup

stories/Calendar.stories.js

@@ -2,9 +2,16 @@ import React from 'react'
 import { action } from '@storybook/addon-actions'
 
 import demoEvents from './resources/events'
+// import demoResourceEvents from './resources/resourceEvents'
 import { Calendar } from '../src'
 
-import { events, Calendar as BaseCalendar, Views } from './helpers'
+import {
+  events,
+  Calendar as BaseCalendar,
+  Views,
+  resourceEvents,
+  resources,
+} from './helpers'
 
 import createEvents from './helpers/createEvents'
 import customComponents from './resources/customComponents'
@@ -101,3 +108,25 @@ CustomNoAgendaEventsLabel.args = {
     noEventsInRange: 'There are no special events in this range [test message]',
   },
 }
+
+export const CustomDayColumnWrapper = Template.bind({})
+CustomDayColumnWrapper.storyName = 'add custom dayColumnWrapper'
+CustomDayColumnWrapper.args = {
+  defaultView: Views.DAY,
+  events: resourceEvents,
+  resources: resources,
+  resourceAccessor: 'resourceId',
+  resourceIdAccessor: 'id',
+  resourceTitleAccessor: 'name',
+  components: {
+    dayColumnWrapper: customComponents.dayColumnWrapper,
+  },
+}
+CustomDayColumnWrapper.parameters = {
+  docs: {
+    description: {
+      story:
+        'The custom DayColumnWrapper allows you to add your own custom logic when rendering a Day Column.',
+    },
+  },
+}

stories/props/components.mdx

@@ -13,6 +13,7 @@ const components = useMemo(() => ({
   eventWrapper: MyEventWrapper,
   eventContainerWrapper: MyEventContainerWrapper,
   dateCellWrapper: MyDateCellWrapper,
+  dayColumnWrapper: MyDayColumnWrapper,
   timeSlotWrapper: MyTimeSlotWrapper,
   timeGutterHeader: MyTimeGutterWrapper,
   resourceHeader: MyResourceHeader,

stories/resources/CustomDayColumnWrapper.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const DayColumnWrapper = ({ children, className, style, innerRef }) => {
+  return (
+    <div className={className} style={style} ref={innerRef}>
+      {children}
+    </div>
+  )
+}
+
+export default React.forwardRef((dayColumnWrapperProps, ref) => {
+  const redBorder = dayColumnWrapperProps.resource % 2 === 0
+  const style = {
+    borderColor: redBorder ? 'red' : '#fff',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+  }
+
+  return (
+    <DayColumnWrapper {...dayColumnWrapperProps} style={style} innerRef={ref} />
+  )
+})

stories/resources/customComponents.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
+import CustomDayColumnWrapper from './CustomDayColumnWrapper'
 
 const customComponents = {
   dateCellWrapper: (dateCellWrapperProps) => {
@@ -27,6 +28,7 @@ const customComponents = {
       </div>
     )
   },
+  dayColumnWrapper: CustomDayColumnWrapper,
   timeSlotWrapper: (timeSlotWrapperProps) => {
     // Show different styles at arbitrary time
     const hasCustomInfo = timeSlotWrapperProps.value

stories/resources/resourceEvents.js

@@ -1,30 +1,35 @@
 export default {
   events: [
     {
+      id: 1,
       title: 'Rencontre',
       resourceId: 'a',
       start: new Date(2015, 3, 2, 5, 30, 0, 0),
       end: new Date(2015, 3, 2, 10, 30, 0, 0),
     },
     {
+      id: 2,
       title: 'Another Meeting',
       resourceId: 'b',
       start: new Date(2015, 3, 1, 2, 30, 0, 0),
       end: new Date(2015, 3, 1, 4, 30, 0, 0),
     },
     {
+      id: 3,
       title: 'A',
       resourceId: 'a',
       start: new Date(2015, 3, 4, 5, 30, 0, 0),
       end: new Date(2015, 3, 4, 10, 30, 0, 0),
     },
     {
+      id: 4,
       title: 'B',
       resourceId: 'b',
       start: new Date(2015, 3, 4, 5, 30, 0, 0),
       end: new Date(2015, 3, 4, 10, 30, 0, 0),
     },
     {
+      id: 5,
       title: 'C',
       resourceId: 'c',
       start: new Date(2015, 3, 4, 5, 30, 0, 0),