如何解决'react-calendar-timeline' 在第一次加载时呈现错误日期的数据画布与日期标题不匹配
我在代码中使用包 react-calendar-timeline
。
时间范围为 10 天。
加载时间线后,它应该显示从今天起 10 天的项目。 DateHeader 始终正确加载,但画布显示 10 天前的项目。
这些是一些例子。组 1 在 07 27 ~ 07 29 范围内有一个项目。
但是,在canvas中,项目在08 06 ~的范围内。 first load
点击上一个或下一个按钮后,画布正确显示项目。 after click prev button
但是,在单击 prev10 或 next10 按钮后(在单击 prev 或 next 之前),画布显示项目错误。 click next10 button after first load
这是我的代码:
var keys = {
groupIdKey: 'id',groupTitleKey: 'title',groupRightTitleKey: 'rightTitle',itemIdKey: 'id',itemTitleKey: 'title',itemDivTitleKey: 'title',itemGroupKey: 'group',itemTimeStartKey: 'start',itemTimeEndKey: 'end',groupLabelKey: 'title'
};
class CustomTimeline extends Component {
constructor(props) {
super(props);
const groups = [];
const items = [];
const visibleTimeStart = moment()
.startOf('day')
.valueOf();
const visibleTimeEnd = moment()
.startOf('day')
.add(10,'day')
.valueOf();
const zoom = visibleTimeEnd - visibleTimeStart;
this.state = { groups,items,visibleTimeStart,visibleTimeEnd,zoom };
};
async componentDidMount() {
const {groups,items} = await GanttData();
this.setState(() => ({
groups: groups,items: items
}));
}
onPrevClick = () => {
this.setState(state => ({
visibleTimeStart: state.visibleTimeStart - state.zoom / 10,visibleTimeEnd: state.visibleTimeEnd - state.zoom / 10
}));
};
onNextClick = () => {
this.setState(state => ({
visibleTimeStart: state.visibleTimeStart + state.zoom / 10,visibleTimeEnd: state.visibleTimeEnd + state.zoom / 10
}));
};
onPrev10Click = () => {
this.setState(state => ({
visibleTimeStart: state.visibleTimeStart - state.zoom,visibleTimeEnd: state.visibleTimeEnd - state.zoom
}));
};
onNext10Click = () => {
this.setState(state => ({
visibleTimeStart: state.visibleTimeStart + state.zoom,visibleTimeEnd: state.visibleTimeEnd + state.zoom
}));
};
handleCanvasClick = (groupId,time) => {
this.props.history.push('/Resv/' + groupId + '/' + time)
}
render() {
const { classes } = this.props;
const { groups,visibleTimeEnd } = this.state;
return (
<div className={classes.root}>
<Paper className={classes.buttonbar}>
<Button variant='outlined' onClick={this.onPrev10Click}>{'< Prev10'}</Button>
<Button variant='outlined' onClick={this.onPrevClick}>{'< Prev'}</Button>
<Button variant='outlined' onClick={this.onNextClick}>{'Next >'}</Button>
<Button variant='outlined' onClick={this.onNext10Click}>{'Next10 >'}</Button>
</Paper>
<Paper className={classes.paper}>
<Timeline
scrollRef={el => (this.scrollRef = el)}
groups={groups}
items={items}
keys={keys}
itemTouchSendsClick={false}
stackItems
itemHeightRatio={0.75}
showCursorLine
canMove={false}
canResize={false}
visibleTimeStart={visibleTimeStart}
visibleTimeEnd={visibleTimeEnd}
onCanvasClick={this.handleCanvasClick}
>
<TimelineHeaders >
<SidebarHeader />
<DateHeader labelFormat='MM DD' />
</TimelineHeaders>
</Timeline>
</Paper>
</div>
);
}
}
export default withRouter(withStyles(useStyles)(CustomTimeline))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。