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..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 { @@ -71,10 +73,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 +125,7 @@ class DateContentRow extends React.Component { longPressThreshold, isAllDay, resizable, + showAllEvents, } = this.props if (renderForMeasure) return this.renderDummy() @@ -125,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 = { @@ -159,24 +170,31 @@ 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 +218,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/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 fb351c70a..6bee557bb 100644 --- a/src/less/styles.less +++ b/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; } diff --git a/src/sass/styles.scss b/src/sass/styles.scss index 9607aca00..4eeae6941 100644 --- a/src/sass/styles.scss +++ b/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'; \ No newline at end of file +@import './time-grid';