From f54447d11407495c11c015493cea54c2d9bc83b5 Mon Sep 17 00:00:00 2001 From: Jackson Hoang Date: Thu, 12 Nov 2020 17:59:13 -0500 Subject: [PATCH 1/2] 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. --- src/Calendar.js | 8 ++++++++ src/DateContentRow.js | 46 ++++++++++++++++++++++++++++++------------- src/Month.js | 5 ++++- src/less/styles.less | 10 ++++++++++ src/sass/styles.scss | 10 ++++++++++ 5 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/Calendar.js b/src/Calendar.js index 884e8fa06..81b75f9d4 100644 --- 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 index b90e4190a..0d487686d 100644 --- 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 (
-
+
{renderHeader && (
{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} /> -
+
{renderHeader && (
{range.map(this.renderHeadingCell)}
)} - - {levels.map((segs, idx) => ( - - ))} - {!!extra.length && ( - +
+ > + + {levels.map((segs, idx) => ( + + ))} + {!!extra.length && ( + + )} + +
) @@ -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 index 58950cbd5..70cc667c2 100644 --- 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 index fb351c70a..a3c3223a2 100644 --- 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 index 9607aca00..55d4d067f 100644 --- 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; } From 19381cf1c0edb4995164906ac28bfcae3d684903 Mon Sep 17 00:00:00 2001 From: Jackson Hoang Date: Tue, 8 Dec 2020 13:29:47 -0500 Subject: [PATCH 2/2] fixup! Add `showAllEvents` Calendar Prop --- src/DateContentRow.js | 13 +++++++------ src/ScrollableWeekWrapper.js | 7 +++++++ src/less/styles.less | 9 +++++++++ src/sass/styles.scss | 11 ++++++++++- 4 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 src/ScrollableWeekWrapper.js diff --git a/src/DateContentRow.js b/src/DateContentRow.js index 0d487686d..d00333086 100644 --- a/src/DateContentRow.js +++ b/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 { @@ -131,6 +133,9 @@ class DateContentRow extends React.Component { let metrics = this.slotMetrics(this.props) let { levels, extra } = metrics + let ScrollableWeekComponent = showAllEvents + ? ScrollableWeekWrapper + : NoopWrapper let WeekWrapper = components.weekWrapper const eventRowProps = { @@ -176,11 +181,7 @@ class DateContentRow extends React.Component { {range.map(this.renderHeadingCell)}
)} -
+ {levels.map((segs, idx) => ( @@ -193,7 +194,7 @@ class DateContentRow extends React.Component { /> )} -
+
) diff --git a/src/ScrollableWeekWrapper.js b/src/ScrollableWeekWrapper.js new file mode 100644 index 000000000..51eccb412 --- /dev/null +++ b/src/ScrollableWeekWrapper.js @@ -0,0 +1,7 @@ +import React from 'react' + +const ScrollableWeekWrapper = ({ children }) => { + return
{children}
+} + +export default ScrollableWeekWrapper diff --git a/src/less/styles.less b/src/less/styles.less index a3c3223a2..6bee557bb 100644 --- a/src/less/styles.less +++ b/src/less/styles.less @@ -87,7 +87,16 @@ 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 */ } } diff --git a/src/sass/styles.scss b/src/sass/styles.scss index 55d4d067f..4eeae6941 100644 --- a/src/sass/styles.scss +++ b/src/sass/styles.scss @@ -86,7 +86,16 @@ 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 */ } } @@ -98,4 +107,4 @@ @import './event'; @import './month'; @import './agenda'; -@import './time-grid'; \ No newline at end of file +@import './time-grid';