feat: pass resource prop to DayColumnWrapper

Closes bigcalendar#2607

Author: kellyredd

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

@@ -4,7 +4,13 @@ import { action } from '@storybook/addon-actions'
 import demoEvents from './resources/events'
 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 +107,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