diff --git a/src/Calendar.jsx b/src/Calendar.jsx index c99a42b64..6f7908840 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -84,6 +84,23 @@ let Calendar = React.createClass({ */ toolbar: PropTypes.bool, + /** + * Show truncated events in an overlay when you click the "+_x_ more" link. + */ + popup: PropTypes.bool, + + /** + * Distance in pixels, from the edges of the viewport, the "show more" overlay should be positioned. + * + * ```js + * + * + * ``` + */ + popupOffset: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }) + ]), /** * Allows mouse selection of ranges of dates/times. */ diff --git a/src/Month.jsx b/src/Month.jsx index 185921839..d721ebff5 100644 --- a/src/Month.jsx +++ b/src/Month.jsx @@ -41,6 +41,16 @@ let propTypes = { weekdayFormat: dateFormat, + popup: React.PropTypes.bool, + + popupOffset: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.shape({ + x: React.PropTypes.number, + y: React.PropTypes.number + }) + ]), + onSelectEvent: React.PropTypes.func, onSelectSlot: React.PropTypes.func }; diff --git a/src/Popup.jsx b/src/Popup.jsx index 48bfcd550..19b6d86f1 100644 --- a/src/Popup.jsx +++ b/src/Popup.jsx @@ -9,7 +9,8 @@ import getScrollLeft from 'dom-helpers/query/scrollLeft'; class Popup extends React.Component { componentDidMount(){ - let { top, left, width, height } = getOffset(this.refs.root) + let { popupOffset = 5 } = this.props + , { top, left, width, height } = getOffset(this.refs.root) , viewBottom = window.innerHeight + getScrollTop(window) , viewRight = window.innerWidth + getScrollLeft(window) , bottom = top + height @@ -19,11 +20,11 @@ class Popup extends React.Component { let topOffset, leftOffset; if (bottom > viewBottom) - topOffset = bottom - viewBottom + 5 + topOffset = bottom - viewBottom + (popupOffset.y || +popupOffset || 0) if (right > viewRight) - leftOffset = right - viewRight + 5 + leftOffset = right - viewRight + (popupOffset.x || +popupOffset || 0) - this.setState({ topOffset, leftOffset }) + this.setState({ topOffset, leftOffset }) //eslint-disable-line } } @@ -37,7 +38,8 @@ class Popup extends React.Component { let style = { top: top - topOffset, left: left - leftOffset, - minWidth: width + (width / 2) + minWidth: width + (width / 2), + height: 300 } return (