feat(time-gutter-wrapper): expose time gutter wrapper component (#2236)

Allows clients to override the time gutter wrapper.

Author: dhruvgoel92

src/Calendar.js

@@ -730,6 +730,7 @@ class Calendar extends React.Component {
      *   dateCellWrapper: MyDateCellWrapper,
      *   timeSlotWrapper: MyTimeSlotWrapper,
      *   timeGutterHeader: MyTimeGutterWrapper,
+     *   timeGutterWrapper: MyTimeGutterWrapper,
      *   resourceHeader: MyResourceHeader,
      *   toolbar: MyToolbar,
      *   agenda: {
@@ -762,6 +763,7 @@ class Calendar extends React.Component {
       dayColumnWrapper: PropTypes.elementType,
       timeSlotWrapper: PropTypes.elementType,
       timeGutterHeader: PropTypes.elementType,
+      timeGutterWrapper: PropTypes.elementType,
       resourceHeader: PropTypes.elementType,
 
       toolbar: PropTypes.elementType,
@@ -930,6 +932,7 @@ class Calendar extends React.Component {
         dateCellWrapper: NoopWrapper,
         weekWrapper: NoopWrapper,
         timeSlotWrapper: NoopWrapper,
+        timeGutterWrapper: NoopWrapper,
       }),
       accessors: {
         start: wrapAccessor(startAccessor),

src/TimeGutter.js

@@ -33,6 +33,7 @@ const TimeGutter = ({
   getters,
   gutterRef,
 }) => {
+  const { timeGutterWrapper: TimeGutterWrapper } = components
   const { start, end } = useMemo(
     () => adjustForDST({ min, max, localizer }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -81,20 +82,22 @@ const TimeGutter = ({
   )
 
   return (
-    <div className="rbc-time-gutter rbc-time-column" ref={gutterRef}>
-      {slotMetrics.groups.map((grp, idx) => {
-        return (
-          <TimeSlotGroup
-            key={idx}
-            group={grp}
-            resource={resource}
-            components={components}
-            renderSlot={renderSlot}
-            getters={getters}
-          />
-        )
-      })}
-    </div>
+    <TimeGutterWrapper slotMetrics={slotMetrics}>
+      <div className="rbc-time-gutter rbc-time-column" ref={gutterRef}>
+        {slotMetrics.groups.map((grp, idx) => {
+          return (
+            <TimeSlotGroup
+              key={idx}
+              group={grp}
+              resource={resource}
+              components={components}
+              renderSlot={renderSlot}
+              getters={getters}
+            />
+          )
+        })}
+      </div>
+    </TimeGutterWrapper>
   )
 }
 

stories/Calendar.stories.js

@@ -45,6 +45,20 @@ CustomTimeGutterHeader.args = {
   },
 }
 
+export const CustomTimeGutterWrapper = Template.bind({})
+CustomTimeGutterWrapper.storyName = 'custom TimeGutter wrapper'
+CustomTimeGutterWrapper.args = {
+  popup: true,
+  events: demoEvents,
+  onSelectEvent: action('event selected'),
+  defaultDate: new Date(2015, 3, 1),
+  defaultView: Views.WEEK,
+  views: [Views.WEEK, Views.DAY],
+  components: {
+    timeGutterWrapper: customComponents.timeGutterWrapper,
+  },
+}
+
 export const CustomDateCellWrapper = Template.bind({})
 CustomDateCellWrapper.storyName = 'add custom dateCellWrapper'
 CustomDateCellWrapper.args = {

stories/resources/customComponents.js

@@ -69,6 +69,16 @@ const customComponents = {
           }
     return <div style={style}>{timeSlotWrapperProps.children}</div>
   },
+  timeGutterWrapper: (timeGutterWrapperProps) => {
+    return (
+      <div
+        id="my-custom-time-gutter-wrapper"
+        style={{ backgroundColor: 'gray' }}
+      >
+        {timeGutterWrapperProps.children}
+      </div>
+    )
+  },
 }
 
 export default customComponents