feat: add showAllEvents Calendar Prop (jquense#1808)

* Add `showAllEvents` Calendar Prop

This prop will allow the rows in the `month` view to display
all events in a scrollable container, rather than use the
`show more` capability.

* fixup! Add `showAllEvents` Calendar Prop

Co-authored-by: Jackson Hoang <[email protected]>

Author: jkhoang313

src/Calendar.js

@@ -341,6 +341,14 @@ class Calendar extends React.Component {
      */
     onShowMore: PropTypes.func,
 
+    /**
+     * Displays all events on the month view instead of
+     * having some hidden behind +{count} more. This will
+     * cause the rows in the month view to be scrollable if
+     * the number of events exceed the height of the row.
+     */
+    showAllEvents: PropTypes.bool,
+
     /**
      * The selected event, if any.
      */

src/DateContentRow.js

@@ -9,6 +9,8 @@ import * as dates from './utils/dates'
 import BackgroundCells from './BackgroundCells'
 import EventRow from './EventRow'
 import EventEndingRow from './EventEndingRow'
+import NoopWrapper from './NoopWrapper'
+import ScrollableWeekWrapper from './ScrollableWeekWrapper'
 import * as DateSlotMetrics from './utils/DateSlotMetrics'
 
 class DateContentRow extends React.Component {
@@ -71,10 +73,15 @@ class DateContentRow extends React.Component {
   }
 
   renderDummy = () => {
-    let { className, range, renderHeader } = this.props
+    let { className, range, renderHeader, showAllEvents } = this.props
     return (
       <div className={className}>
-        <div className="rbc-row-content">
+        <div
+          className={clsx(
+            'rbc-row-content',
+            showAllEvents && 'rbc-row-content-scrollable'
+          )}
+        >
           {renderHeader && (
             <div className="rbc-row" ref={this.createHeadingRef}>
               {range.map(this.renderHeadingCell)}
@@ -118,13 +125,17 @@ class DateContentRow extends React.Component {
       longPressThreshold,
       isAllDay,
       resizable,
+      showAllEvents,
     } = this.props
 
     if (renderForMeasure) return this.renderDummy()
 
     let metrics = this.slotMetrics(this.props)
     let { levels, extra } = metrics
 
+    let ScrollableWeekComponent = showAllEvents
+      ? ScrollableWeekWrapper
+      : NoopWrapper
     let WeekWrapper = components.weekWrapper
 
     const eventRowProps = {
@@ -159,24 +170,31 @@ class DateContentRow extends React.Component {
           resourceId={resourceId}
         />
 
-        <div className="rbc-row-content">
+        <div
+          className={clsx(
+            'rbc-row-content',
+            showAllEvents && 'rbc-row-content-scrollable'
+          )}
+        >
           {renderHeader && (
             <div className="rbc-row " ref={this.createHeadingRef}>
               {range.map(this.renderHeadingCell)}
             </div>
           )}
-          <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
-            {levels.map((segs, idx) => (
-              <EventRow key={idx} segments={segs} {...eventRowProps} />
-            ))}
-            {!!extra.length && (
-              <EventEndingRow
-                segments={extra}
-                onShowMore={this.handleShowMore}
-                {...eventRowProps}
-              />
-            )}
-          </WeekWrapper>
+          <ScrollableWeekComponent>
+            <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
+              {levels.map((segs, idx) => (
+                <EventRow key={idx} segments={segs} {...eventRowProps} />
+              ))}
+              {!!extra.length && (
+                <EventEndingRow
+                  segments={extra}
+                  onShowMore={this.handleShowMore}
+                  {...eventRowProps}
+                />
+              )}
+            </WeekWrapper>
+          </ScrollableWeekComponent>
         </div>
       </div>
     )
@@ -200,6 +218,7 @@ DateContentRow.propTypes = {
   longPressThreshold: PropTypes.number,
 
   onShowMore: PropTypes.func,
+  showAllEvents: PropTypes.bool,
   onSelectSlot: PropTypes.func,
   onSelect: PropTypes.func,
   onSelectEnd: PropTypes.func,

src/Month.js

@@ -102,6 +102,7 @@ class MonthView extends React.Component {
       longPressThreshold,
       accessors,
       getters,
+      showAllEvents,
     } = this.props
 
     const { needLimitMeasure, rowLimit } = this.state
@@ -120,7 +121,7 @@ class MonthView extends React.Component {
         date={date}
         range={week}
         events={events}
-        maxRows={rowLimit}
+        maxRows={showAllEvents ? Infinity : rowLimit}
         selected={selected}
         selectable={selectable}
         components={components}
@@ -137,6 +138,7 @@ class MonthView extends React.Component {
         longPressThreshold={longPressThreshold}
         rtl={this.props.rtl}
         resizable={this.props.resizable}
+        showAllEvents={showAllEvents}
       />
     )
   }
@@ -342,6 +344,7 @@ MonthView.propTypes = {
   onDoubleClickEvent: PropTypes.func,
   onKeyPressEvent: PropTypes.func,
   onShowMore: PropTypes.func,
+  showAllEvents: PropTypes.bool,
   onDrillDown: PropTypes.func,
   getDrilldownView: PropTypes.func.isRequired,
 

src/ScrollableWeekWrapper.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ScrollableWeekWrapper = ({ children }) => {
+  return <div className="rbc-row-content-scroll-container">{children}</div>
+}
+
+export default ScrollableWeekWrapper

src/less/styles.less

@@ -81,6 +81,25 @@
   z-index: 4;
 }
 
+.rbc-row-content-scrollable {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .rbc-row-content-scroll-container {
+    height: 100%;
+    overflow-y: scroll;
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+
 .rbc-today {
   background-color: @today-highlight-bg;
 }

src/sass/styles.scss

@@ -80,6 +80,25 @@
   z-index: 4;
 }
 
+.rbc-row-content-scrollable {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .rbc-row-content-scroll-container {
+    height: 100%;
+    overflow-y: scroll;
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
+
 .rbc-today {
   background-color: $today-highlight-bg;
 }
@@ -88,4 +107,4 @@
 @import './event';
 @import './month';
 @import './agenda';
-@import './time-grid';
+@import './time-grid';