'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 (将#修改为@）