Add selectionWrapper prop for customizable selection styling

src/Calendar.js

@@ -796,6 +796,7 @@ class Calendar extends React.Component {
       event: PropTypes.elementType,
       eventWrapper: PropTypes.elementType,
       eventContainerWrapper: PropTypes.elementType,
+      selectionWrapper: PropTypes.elementType,
       dateCellWrapper: PropTypes.elementType,
       dayColumnWrapper: PropTypes.elementType,
       timeSlotWrapper: PropTypes.elementType,

src/DayColumn.js

@@ -1,15 +1,15 @@
-import React, { createRef } from 'react'
-import PropTypes from 'prop-types'
 import clsx from 'clsx'
+import PropTypes from 'prop-types'
+import React, { createRef } from 'react'
 
 import Selection, { getBoundsForNode, isEvent } from './Selection'
 import * as TimeSlotUtils from './utils/TimeSlots'
 import { isSelected } from './utils/selection'
 
-import { notify } from './utils/helpers'
-import * as DayEventLayout from './utils/DayEventLayout'
-import TimeSlotGroup from './TimeSlotGroup'
 import TimeGridEvent from './TimeGridEvent'
+import TimeSlotGroup from './TimeSlotGroup'
+import * as DayEventLayout from './utils/DayEventLayout'
+import { notify } from './utils/helpers'
 import { DayLayoutAlgorithmPropType } from './utils/propTypes'
 
 import DayColumnWrapper from './DayColumnWrapper'
@@ -110,7 +110,11 @@ class DayColumn extends React.Component {
       accessors,
       localizer,
       getters: { dayProp, ...getters },
-      components: { eventContainerWrapper: EventContainer, ...components },
+      components: {
+        eventContainerWrapper: EventContainer,
+        selectionWrapper: Selection,
+        ...components
+      },
     } = this.props
 
     this.slotMetrics = this.slotMetrics.update(this.props)
@@ -169,7 +173,11 @@ class DayColumn extends React.Component {
 
         {selecting && (
           <div className="rbc-slot-selection" style={{ top, height }}>
-            <span>{localizer.format(selectDates, 'selectRangeFormat')}</span>
+            {Selection ? (
+              <Selection {...selectDates} />
+            ) : (
+              <span>{localizer.format(selectDates, 'selectRangeFormat')}</span>
+            )}
           </div>
         )}
         {isNow && this.intervalTriggered && (

stories/Calendar.stories.js

@@ -98,6 +98,17 @@ CustomEventWrapper.args = {
   },
 }
 
+export const CustomSelectionWrapper = Template.bind({})
+CustomSelectionWrapper.storyName = 'add custom selectionWrapper'
+CustomSelectionWrapper.args = {
+  defaultView: Views.DAY,
+  events,
+  selectable: true,
+  components: {
+    selectionWrapper: customComponents.selectionWrapper,
+  },
+}
+
 export const CustomNoAgendaEventsLabel = Template.bind({})
 CustomNoAgendaEventsLabel.storyName = 'add custom no agenda events label'
 CustomNoAgendaEventsLabel.args = {

stories/resources/customComponents.js

@@ -55,6 +55,17 @@ const customComponents = {
     }
     return <div style={style}>{eventWrapperProps.children}</div>
   },
+  selectionWrapper: (selectionWrapperProps) => {
+    const style = {
+      width: '100%',
+      height: '100%',
+      border: '4px solid',
+      borderColor: 'blue',
+      backgroundColor: 'red',
+      padding: '5px',
+    }
+    return <div style={style}>{selectionWrapperProps.children}</div>
+  },
   timeSlotWrapper: (timeSlotWrapperProps) => {
     const style =
       timeSlotWrapperProps.resource === null ||