react-calendar-timeline buffer disabling horizontal scrolling

user_10210344 0
Viewed 21

I really like the new buffer prop from 0.28 that allows you to disable/enable horizontal scrolling. However, I can't seem to get it to work when I try using it. Any idea what is wrong with the following code? Thank you for taking a look!

                <Timeline
                    groups={groups}
                    items={items}
                    stackItems
                    itemHeightRatio={0.85}
                    canMove={false}
                    canResize={false}
                    buffer={1} // prevent mouse scrolling
                    visibleTimeStart={state.visibleTimeStart}
                    visibleTimeEnd={state.visibleTimeEnd}
                    itemRenderer={itemRenderer}
                    onTimeChange={handleTimeChange}
                    onItemSelect={onItemClick}
                    onItemClick={onItemClick}
                >
react-calendar-timeline reactjs
1 Answers

buffer prop is not really to disable/enable the horizontal scroll but to control the buffer that is rendered on both sides of the calendar.

The calendar itself is actually a 3x wide scrolling canvas of the screen, which is the default value of buffer = 3. Ideally you should increase this value not decrease it.

An easy way to disable scroll and zoom

To control/disable the horizontal scroll use visibleTimeStart and visibleTimeEnd, and implement handleOnTimeChange to only call updateScrollCanvas with your visibleTimeStart and visibleTimeEnd.

handleTimeChange = (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => {
  updateScrollCanvas(moment(this.state.defaultTimeStart).valueOf(), 
  moment(this.state.defaultTimeEnd).valueOf());
}
user_2134690
Related