Skip to content

Commit

Permalink
[changed] better event overlays for overlapping events
Browse files Browse the repository at this point in the history
  • Loading branch information
jquense committed Oct 28, 2015
1 parent c787c31 commit c07d0ab
Showing 1 changed file with 15 additions and 8 deletions.
23 changes: 15 additions & 8 deletions src/DaySlot.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,21 @@ function positionFromDate(date, min, step){
return dates.diff(min, dates.merge(min, date), 'minutes')
}

function overlaps(event, events, { startAccessor, endAccessor }){
function overlaps(event, events, { startAccessor, endAccessor }, last) {
let eStart = get(event, startAccessor);
let offset = last;

function overlap(eventB){
return dates.lt(eStart, get(eventB, endAccessor))
}

return events.reduce((sum, otherEvent) => {
return sum + (overlap(otherEvent) ? 1 : 0)
}, 0)
if (!events.length) return last - 1
events.reverse().some(prevEvent => {
if (overlap(prevEvent)) return true
offset = offset - 1
})

return offset
}

let DaySlot = React.createClass({
Expand Down Expand Up @@ -120,7 +125,8 @@ let DaySlot = React.createClass({
, selected, eventTimeRangeFormat, eventComponent
, startAccessor, endAccessor, titleAccessor } = this.props;

let EventComponent = eventComponent;
let EventComponent = eventComponent
, lastLeftOffset = 0;

events.sort((a, b) => +get(a, startAccessor) - +get(b, startAccessor))

Expand All @@ -130,9 +136,10 @@ let DaySlot = React.createClass({
let startSlot = positionFromDate(start, min, step);
let endSlot = positionFromDate(end, min, step);

let leftOffset = overlaps(event, events.slice(0, idx), this.props)
lastLeftOffset = Math.max(0,
overlaps(event, events.slice(0, idx), this.props, lastLeftOffset + 1))

let style = this._slotStyle(startSlot, endSlot, leftOffset)
let style = this._slotStyle(startSlot, endSlot, lastLeftOffset)

let title = get(event, titleAccessor)
let label = localizer.format({ start, end }, eventTimeRangeFormat, culture);
Expand All @@ -149,7 +156,7 @@ let DaySlot = React.createClass({
onClick={this._select.bind(null, event)}
className={cn('rbc-event', className, {
'rbc-selected': _isSelected,
'rbc-event-overlaps': leftOffset !== 0
'rbc-event-overlaps': lastLeftOffset !== 0
})}
>
<div className='rbc-event-label'>{label}</div>
Expand Down

0 comments on commit c07d0ab

Please sign in to comment.