0

react-calendar-timeline我在我的代码中使用包。时间线的范围是 10 天。

加载时间线后，它应该显示从今天起 10 天的项目。DateHeader 始终正确加载，但画布显示 10 天前的项目。

这些是一些例子。第 1 组的项目范围为 07 27 ~ 07 29。

但是，在画布中，该项目在 08 06 ~ 的范围内。第一次加载

单击上一个或下一个按钮后，画布正确显示项目。单击上一个按钮后

但是，在单击 prev10 或 next10 按钮后（在单击 prev 或 next 之前），画布显示项目错误。首次加载后单击 next10 按钮

这是我的代码：


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, items, visibleTimeStart, 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))
4

0 回答 0