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.
jquense · Nov 12, 2020 · f54447d · f54447d
1 parent 41104fa
commit f54447d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 15 deletions.
diff --git a/src/Calendar.js b/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.
      */

diff --git a/src/DateContentRow.js b/src/DateContentRow.js
@@ -71,10 +71,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,6 +123,7 @@ class DateContentRow extends React.Component {
       longPressThreshold,
       isAllDay,
       resizable,
+      showAllEvents,
     } = this.props
 
     if (renderForMeasure) return this.renderDummy()
@@ -159,24 +165,35 @@ 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}
-              />
+          <div
+            className={clsx(
+              showAllEvents && 'rbc-row-content-scroll-container'
             )}
-          </WeekWrapper>
+          >
+            <WeekWrapper isAllDay={isAllDay} {...eventRowProps}>
+              {levels.map((segs, idx) => (
+                <EventRow key={idx} segments={segs} {...eventRowProps} />
+              ))}
+              {!!extra.length && (
+                <EventEndingRow
+                  segments={extra}
+                  onShowMore={this.handleShowMore}
+                  {...eventRowProps}
+                />
+              )}
+            </WeekWrapper>
+          </div>
         </div>
       </div>
     )
@@ -200,6 +217,7 @@ DateContentRow.propTypes = {
   longPressThreshold: PropTypes.number,
 
   onShowMore: PropTypes.func,
+  showAllEvents: PropTypes.bool,
   onSelectSlot: PropTypes.func,
   onSelect: PropTypes.func,
   onSelectEnd: PropTypes.func,

diff --git a/src/Month.js b/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,
 

diff --git a/src/less/styles.less b/src/less/styles.less
@@ -81,6 +81,16 @@
   z-index: 4;
 }
 
+.rbc-row-content-scrollable {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .rbc-row-content-scroll-container {
+    overflow-y: scroll;
+  }
+}
+
 .rbc-today {
   background-color: @today-highlight-bg;
 }

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -80,6 +80,16 @@
   z-index: 4;
 }
 
+.rbc-row-content-scrollable {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .rbc-row-content-scroll-container {
+    overflow-y: scroll;
+  }
+}
+
 .rbc-today {
   background-color: $today-highlight-bg;
 }