diff --git a/examples/events.js b/examples/events.js index 628b83c72..93f7e400e 100644 --- a/examples/events.js +++ b/examples/events.js @@ -9,22 +9,22 @@ // }) export default [ - { - "title": "All Day Event", - "allDay": true, - "start": new Date(2015, 3, 0), - "end": new Date(2015, 3, 0) - }, - { - "title": "Long Event", - "start": new Date(2015, 3, 7), - "end": new Date(2015, 3, 10), - }, - { - "title": "Some Event", - "start": new Date(2015, 3, 9, 0, 0, 0), - "end": new Date(2015, 3, 9, 0, 0, 0), - }, + // { + // "title": "All Day Event", + // "allDay": true, + // "start": new Date(2015, 3, 0), + // "end": new Date(2015, 3, 0) + // }, + // { + // "title": "Long Event", + // "start": new Date(2015, 3, 7), + // "end": new Date(2015, 3, 10), + // }, + // { + // "title": "Some Event", + // "start": new Date(2015, 3, 9, 0, 0, 0), + // "end": new Date(2015, 3, 9, 0, 0, 0), + // }, { "title": "Conference", "start": new Date(2015, 3, 11), @@ -33,31 +33,36 @@ export default [ { "title": "Meeting", "start": new Date(2015, 3, 12, 10, 30, 0, 0), - "end": new Date(2015, 3, 12, 12, 30, 0, 0) + "end": new Date(2015, 3, 13, 12, 30, 0, 0) }, { "title": "Lunch", "start":new Date(2015, 3, 12, 12, 0, 0, 0), - "end": new Date(2015, 3, 12, 13, 0, 0, 0) - }, - { - "title": "Meeting", - "start":new Date(2015, 3, 12,14, 0, 0, 0), - "end": new Date(2015, 3, 12,15, 0, 0, 0) - }, - { - "title": "Happy Hour", - "start":new Date(2015, 3, 12, 17, 0, 0, 0), - "end": new Date(2015, 3, 12, 17, 30, 0, 0) + "end": new Date(2015, 3, 13, 13, 0, 0, 0) }, + // { + // "title": "Meeting", + // "start":new Date(2015, 3, 12,14, 0, 0, 0), + // "end": new Date(2015, 3, 13,15, 0, 0, 0) + // }, + // { + // "title": "Happy Hour", + // "start":new Date(2015, 3, 12, 17, 0, 0, 0), + // "end": new Date(2015, 3, 13, 17, 30, 0, 0) + // }, { "title": "Dinner", "start":new Date(2015, 3, 12, 20, 0, 0, 0), - "end": new Date(2015, 3, 12, 21, 0, 0, 0) + "end": new Date(2015, 3, 13, 21, 0, 0, 0) }, { "title": "Birthday Party", "start":new Date(2015, 3, 13, 7, 0, 0), "end": new Date(2015, 3, 13, 10, 30, 0) + }, + { + "title": "Birthday Party 2", + "start":new Date(2015, 3, 13, 7, 0, 0), + "end": new Date(2015, 3, 13, 7, 0, 0) } ] diff --git a/src/Calendar.jsx b/src/Calendar.jsx index d7b4a5ba2..c99a42b64 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -192,6 +192,9 @@ let Calendar = React.createClass({ month: PropTypes.shape({ event: elementType }) }), + /** + * String messages used throughout the component, override to provide localizations + */ messages: PropTypes.shape({ allDay: PropTypes.string, previous: PropTypes.string, @@ -200,7 +203,8 @@ let Calendar = React.createClass({ month: PropTypes.string, week: PropTypes.string, day: PropTypes.string, - agenda: PropTypes.string + agenda: PropTypes.string, + showMore: PropTypes.func }) }, diff --git a/src/DaySlot.jsx b/src/DaySlot.jsx index 724826a62..9943da6d2 100644 --- a/src/DaySlot.jsx +++ b/src/DaySlot.jsx @@ -145,12 +145,14 @@ let DaySlot = React.createClass({
-
{label}
+
{label}
{ EventComponent ? @@ -163,16 +165,21 @@ let DaySlot = React.createClass({ }, _slotStyle(startSlot, endSlot, leftOffset){ + + endSlot = Math.max(endSlot, startSlot + this.props.step) //must be at least one `step` high + let eventOffset = this.props.eventOffset || 10; let top = ((startSlot / this._totalMin) * 100); let bottom = ((endSlot / this._totalMin) * 100); + let per = leftOffset === 0 ? 0 : leftOffset * eventOffset; + let rightDiff = (eventOffset / (leftOffset + 1)); return { top: top + '%', height: bottom - top + '%', - left: leftOffset === 0 ? 0 : leftOffset * eventOffset + '%', - right: 0 + left: per + '%', + width: (leftOffset === 0 ? (100 - eventOffset) : (100 - per) - rightDiff) + '%' } }, @@ -180,7 +187,7 @@ let DaySlot = React.createClass({ let node = findDOMNode(this); let selector = this._selector = new Selection(()=> findDOMNode(this)) - selector.on('selecting', ({ x, y }) => { + let selectionState = ({ x, y }) => { let { date, step, min } = this.props; let { top, bottom } = getBoundsForNode(node) @@ -204,14 +211,20 @@ let DaySlot = React.createClass({ let start = dates.min(initial, current) let end = dates.max(initial, current) - this.setState({ + return { selecting: true, startDate: start, endDate: end, startSlot: positionFromDate(start, min, step), endSlot: positionFromDate(end, min, step) - }) - }) + } + } + + selector.on('selecting', + box => this.setState(selectionState(box))) + + selector.on('selectStart', + box => this.setState(selectionState(box))) selector .on('click', () => { diff --git a/src/less/day-slot.less b/src/less/day-slot.less index ad4f7086a..1cd5f29ea 100644 --- a/src/less/day-slot.less +++ b/src/less/day-slot.less @@ -12,6 +12,7 @@ max-height: 100%; flex-flow: column wrap; align-items: flex-start; + overflow: hidden; } .rbc-event-label { @@ -49,4 +50,4 @@ .rbc-day-slot .rbc-event { position: absolute; -} \ No newline at end of file +} diff --git a/src/less/event.less b/src/less/event.less index 0e7c8dc5c..364d840a8 100644 --- a/src/less/event.less +++ b/src/less/event.less @@ -17,11 +17,16 @@ font-size: 80%; } +.rbc-event-overlaps { + box-shadow: -1px 1px 5px 0px rgba(51,51,51,.5); +} + .rbc-event-continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .rbc-event-continues-prior { border-top-left-radius: 0; border-bottom-left-radius: 0; -} \ No newline at end of file +} diff --git a/src/less/month.less b/src/less/month.less index 32b5cb4af..480985542 100644 --- a/src/less/month.less +++ b/src/less/month.less @@ -20,33 +20,17 @@ opacity: 0.05 } -.show-more-offsets (@i) when (@i > 0) { - @per: percentage((@i - 1) / 7); - .rbc-show-offset-@{i}{ - left: @per; - } - .show-more-offsets (@i - 1); -} - -.show-more-offsets(7); .rbc-show-more { &:extend(.rbc-ellipsis); background-color: rgba(255, 255, 255, 0.3); z-index: @event-zindex; - float: left; - position: absolute; - width: 14.28571429%; - bottom: 0; - //font-style: italic; font-weight: bold; font-size: 85%; - text-align: center; height: auto; line-height: normal; white-space: nowrap; - color: #333; } .rbc-month-view { @@ -134,4 +118,4 @@ > * + * { margin-top: 1px; } -} \ No newline at end of file +}