Autosizing / horizontal scrolling

[rbrockenauer]

Hello, i want to integrate the react-big-scheduler on a page in a specific region. As the page and the region can grow or shrink on different displays, i use the AutoSizer of react-virtualized to compute the width & height that is reserved for the scheduler. this i pass to the scheduler. In the result, the width is set correctly, but the height is ignored.

as a workaround, i put an additional div around the scheduler to restritct also its height (see my code snippet below).

But the result is not what i really want: when scrolling vertically either the scheduler-header is not to be seen or the horizontal scrollbar in the "footer" is missing.

What do i have to do, that the scheduler uses the given height and does vertical scrolling only for the table body?

Many thanks for your help! Greetings Ralf

render() { const {schedulerData} = this.schedulerModel; const {width, height} = this.props;

schedulerData.config.schedulerHeight = height;
schedulerData.config.schedulerWidth = width;

  <div style={{height: height, width: width, overflow: 'auto'}}>
    <Scheduler schedulerData={schedulerData}
      prevClick={this.prevClick}
      nextClick={this.nextClick}
      onSelectDate={this.onSelectDate}
      onViewChange={this.onViewChange}
      eventItemClick={this.eventClicked}
      leftCustomHeader={leftCustomHeader}
    />
  </div>
);

}

[hbellala]

Hey unrelated to your issue, I'm having an issue with the styling did you have import Antd when you rendered the scheduler component? Here is a link to my issue if you want more detail https://github.com/StephenChou1017/react-big-scheduler/issues/161

[dgo2dance]

Hello, i want to integrate the react-big-scheduler on a page in a specific region. As the page and the region can grow or shrink on different displays, i use the AutoSizer of react-virtualized to compute the width & height that is reserved for the scheduler. this i pass to the scheduler. In the result, the width is set correctly, but the height is ignored.

as a workaround, i put an additional div around the scheduler to restritct also its height (see my code snippet below).

But the result is not what i really want: when scrolling vertically either the scheduler-header is not to be seen or the horizontal scrollbar in the "footer" is missing.

What do i have to do, that the scheduler uses the given height and does vertical scrolling only for the table body?

Many thanks for your help! Greetings Ralf

render() { const {schedulerData} = this.schedulerModel; const {width, height} = this.props;

schedulerData.config.schedulerHeight = height;
schedulerData.config.schedulerWidth = width;

  <div style={{height: height, width: width, overflow: 'auto'}}>
    <Scheduler schedulerData={schedulerData}
      prevClick={this.prevClick}
      nextClick={this.nextClick}
      onSelectDate={this.onSelectDate}
      onViewChange={this.onViewChange}
      eventItemClick={this.eventClicked}
      leftCustomHeader={leftCustomHeader}
    />
  </div>
);

}

Hello, have you found a way to solve this problem