feat(components): showMore component customization

I'm trying to render a custom component for the `show more` button. I
know there are a few recommended ways to do this through the `onShowMore`
callback and the `messages.showMore` prop as suggested in #1147.

But that doesn't cover all use cases. For example, I want to access the
events that are being hidden by the `show more` button. I also want to
render a custom popup right next to the `show more` button.

Resolves #2391

src/Calendar.js

@@ -750,6 +750,7 @@ class Calendar extends React.Component {
      *   timeGutterHeader: MyTimeGutterWrapper,
      *   timeGutterWrapper: MyTimeGutterWrapper,
      *   resourceHeader: MyResourceHeader,
+     *   showMore: MyShowMoreEvent,
      *   toolbar: MyToolbar,
      *   agenda: {
      *   	 event: MyAgendaEvent, // with the agenda view use a different component to render events
@@ -783,6 +784,7 @@ class Calendar extends React.Component {
       timeGutterHeader: PropTypes.elementType,
       timeGutterWrapper: PropTypes.elementType,
       resourceHeader: PropTypes.elementType,
+      showMore: PropTypes.elementType,
 
       toolbar: PropTypes.elementType,
 

src/EventEndingRow.js

@@ -75,10 +75,30 @@ class EventEndingRow extends React.Component {
   }
 
   renderShowMore(segments, slot) {
-    let { localizer, slotMetrics } = this.props
+    let { localizer, slotMetrics, components } = this.props
     const events = slotMetrics.getEventsForSlot(slot)
     const remainingEvents = eventsInSlot(segments, slot)
     const count = remainingEvents.length
+
+    if (components?.showMore) {
+      const ShowMore = components.showMore
+      // The received slot seems to be 1-based, but the range we use to pull the date is 0-based
+      const slotDate = slotMetrics.getDateForSlot(slot - 1)
+
+      return count ? (
+        <ShowMore
+          localizer={localizer}
+          slotDate={slotDate}
+          slot={slot}
+          count={count}
+          events={events}
+          remainingEvents={remainingEvents}
+        />
+      ) : (
+        false
+      )
+    }
+
     return count ? (
       <button
         type="button"

stories/Calendar.stories.js

@@ -129,3 +129,13 @@ CustomDayColumnWrapper.parameters = {
     },
   },
 }
+
+export const CustomShowMore = Template.bind({})
+CustomShowMore.storyName = 'add custom showMore'
+CustomShowMore.args = {
+  defaultView: Views.MONTH,
+  events,
+  components: {
+    showMore: customComponents.showMore,
+  },
+}

stories/helpers/index.js

@@ -44,6 +44,36 @@ export const DragableCalendar = (props) => {
 }
 
 export const events = [
+  {
+    title: 'example 1',
+    start: moment().startOf('month').add(1, 'hours').toDate(),
+    end: moment().startOf('month').add(2, 'hours').toDate(),
+    allDay: false,
+  },
+  {
+    title: 'example 2',
+    start: moment().startOf('month').add(1, 'hours').toDate(),
+    end: moment().startOf('month').add(2, 'hours').toDate(),
+    allDay: false,
+  },
+  {
+    title: 'example 3',
+    start: moment().startOf('month').add(1, 'hours').toDate(),
+    end: moment().startOf('month').add(2, 'hours').toDate(),
+    allDay: false,
+  },
+  {
+    title: 'example 4',
+    start: moment().startOf('month').add(1, 'hours').toDate(),
+    end: moment().startOf('month').add(2, 'hours').toDate(),
+    allDay: false,
+  },
+  {
+    title: 'example 5',
+    start: moment().startOf('month').add(1, 'hours').toDate(),
+    end: moment().startOf('month').add(2, 'hours').toDate(),
+    allDay: false,
+  },
   {
     title: 'test',
     start: moment().add(1, 'days').subtract(5, 'hours').toDate(),

stories/props/components.mdx

@@ -18,6 +18,7 @@ const components = useMemo(() => ({
   timeGutterHeader: MyTimeGutterWrapper,
   resourceHeader: MyResourceHeader,
   toolbar: MyToolbar,
+  showMore: MyShowMoreButton,
   agenda: {
     event: MyAgendaEvent, // with the agenda view use a different component to render events
     time: MyAgendaTime,

stories/resources/customComponents.js

@@ -81,6 +81,27 @@ const customComponents = {
       </div>
     )
   },
+  showMore: (showMoreProps) => {
+    return (
+      <button
+        id="my-custom-show-more"
+        style={{ border: '4px solid red', cursor: 'pointer' }}
+        onClick={() => {
+          console.log('showMoreProps', showMoreProps)
+          window.alert(`
+            Clicked ${showMoreProps.slotDate
+              .toISOString()
+              .substr(0, 10)} with ${
+            showMoreProps.remainingEvents.length
+          } remaining events.
+            Open the console for the full set of props.
+          `)
+        }}
+      >
+        {showMoreProps.count} more!
+      </button>
+    )
+  },
 }
 
 export default customComponents