diff --git a/src/Agenda.js b/src/Agenda.js index d5f6da339..77188ef5f 100644 --- a/src/Agenda.js +++ b/src/Agenda.js @@ -10,6 +10,15 @@ import { inRange } from './utils/eventLevels' import { isSelected } from './utils/selection' class Agenda extends React.Component { + constructor(props) { + super(props) + this.headerRef = React.createRef() + this.dateColRef = React.createRef() + this.timeColRef = React.createRef() + this.contentRef = React.createRef() + this.tbodyRef = React.createRef() + } + componentDidMount() { this._adjustHeader() } @@ -33,22 +42,22 @@ class Agenda extends React.Component {
{events.length !== 0 ? ( - +
- -
+ {messages.date} + {messages.time} {messages.event}
-
+
- + {range.map((day, idx) => this.renderDay(day, events, idx))}
@@ -155,15 +164,16 @@ class Agenda extends React.Component { } _adjustHeader = () => { - if (!this.refs.tbody) return + if (!this.tbodyRef.current) return - let header = this.refs.header - let firstRow = this.refs.tbody.firstChild + let header = this.headerRef.current + let firstRow = this.tbodyRef.current.firstChild if (!firstRow) return let isOverflowing = - this.refs.content.scrollHeight > this.refs.content.clientHeight + this.contentRef.current.scrollHeight > + this.contentRef.current.clientHeight let widths = this._widths || [] this._widths = [ @@ -172,8 +182,8 @@ class Agenda extends React.Component { ] if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) { - this.refs.dateCol.style.width = this._widths[0] + 'px' - this.refs.timeCol.style.width = this._widths[1] + 'px' + this.dateColRef.current.style.width = this._widths[0] + 'px' + this.timeColRef.current.style.width = this._widths[1] + 'px' } if (isOverflowing) { diff --git a/src/Calendar.js b/src/Calendar.js index 132cb16e1..71bc0ec5c 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -897,7 +897,6 @@ class Calendar extends React.Component { /> )} +
{localizer.format(slotStart, 'dayHeaderFormat')}
diff --git a/src/TimeGrid.js b/src/TimeGrid.js index c96c87e5a..62d9e4c86 100644 --- a/src/TimeGrid.js +++ b/src/TimeGrid.js @@ -22,6 +22,7 @@ export default class TimeGrid extends Component { this.state = { gutterWidth: undefined, isOverflowing: null } this.scrollRef = React.createRef() + this.contentRef = React.createRef() } componentWillMount() { @@ -209,7 +210,7 @@ export default class TimeGrid extends Component { getDrilldownView={this.props.getDrilldownView} />
@@ -253,7 +254,7 @@ export default class TimeGrid extends Component { applyScroll() { if (this._scrollRatio) { - const { content } = this.refs + const content = this.contentRef.current content.scrollTop = content.scrollHeight * this._scrollRatio // Only do this once this._scrollRatio = null @@ -272,8 +273,8 @@ export default class TimeGrid extends Component { checkOverflow = () => { if (this._updatingOverflow) return - let isOverflowing = - this.refs.content.scrollHeight > this.refs.content.clientHeight + const content = this.contentRef.current + let isOverflowing = content.scrollHeight > content.clientHeight if (this.state.isOverflowing !== isOverflowing) { this._updatingOverflow = true