Skip to content
This repository has been archived by the owner on Aug 1, 2024. It is now read-only.

Commit

Permalink
Showing 3 changed files with 50 additions and 13 deletions.
6 changes: 1 addition & 5 deletions src/Month.jsx
Original file line number Diff line number Diff line change
@@ -288,16 +288,12 @@ let MonthView = React.createClass({
onHide={() => this.setState({ overlay: null })}
>
<Popup
{...this.props}
position={overlay.position}
events={overlay.events}
slotStart={overlay.date}
slotEnd={overlay.end}
selected={this.props.selected}
onSelect={this._selectEvent}
eventPropGetter={this.props.eventPropGetter}
startAccessor={this.props.startAccessor}
endAccessor={this.props.endAccessor}
titleAccessor={this.props.titleAccessor}
/>
</Overlay>
)
50 changes: 43 additions & 7 deletions src/Popup.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,58 @@
import React from 'react';
import EventCell from './EventCell';
import { isSelected } from './utils/selection';
import localizer from './localizer';
import getOffset from 'dom-helpers/query/offset';
import getScrollTop from 'dom-helpers/query/scrollTop';
import getScrollLeft from 'dom-helpers/query/scrollLeft';

class Popup extends React.Component {
render() {
let { events, selected, ...props } = this.props;

let { left, width, top } = this.props.position;
componentDidMount(){
let { top, left, width, height } = getOffset(this.refs.root)
, viewBottom = window.innerHeight + getScrollTop(window)
, viewRight = window.innerWidth + getScrollLeft(window)
, bottom = top + height
, right = left + width

if (bottom > viewBottom || right > viewRight) {
let topOffset, leftOffset;

if (bottom > viewBottom)
topOffset = bottom - viewBottom + 5
if (right > viewRight)
leftOffset = right - viewRight + 5

this.setState({ topOffset, leftOffset })
}
}

render() {
let { events, selected, eventComponent, ...props } = this.props;

top += 20;
let { left, width, top } = this.props.position
, topOffset = (this.state || {}).topOffset || 0
, leftOffset = (this.state || {}).leftOffset || 0;

let style = { left, top, minWidth: width + (width / 2) }
let style = {
top: top - topOffset,
left: left - leftOffset,
minWidth: width + (width / 2)
}

return (
<div style={style} className='rbc-overlay'>
<div ref='root' style={style} className='rbc-overlay'>
<div className='rbc-overlay-header'>
{ localizer.format(props.slotStart, props.dayHeaderFormat, props.culture) }
</div>
{
events.map((event, idx) =>
<EventCell key={idx} {...props} event={event} selected={isSelected(event, selected)} />
<EventCell key={idx}
{...props}
event={event}
component={eventComponent}
selected={isSelected(event, selected)}
/>
)
}
</div>
7 changes: 6 additions & 1 deletion src/less/month.less
Original file line number Diff line number Diff line change
@@ -108,7 +108,6 @@

.rbc-overlay {
position: absolute;
//width: 400;
z-index: @event-zindex + 1;
border: 1px solid #e5e5e5;
background-color: #fff;
@@ -119,3 +118,9 @@
margin-top: 1px;
}
}

.rbc-overlay-header {
border-bottom: 1px solid #e5e5e5;
margin: -10px -10px 5px -10px ;
padding: 2px 10px;
}

0 comments on commit d98af8d

Please sign in to comment.