React-calendar-timeline: Manual zoom control

[mdrulis-neurosys]

Is there a way to disable mouse-scroll-zooming and control it manually? I was thinking about setting defaultTimeStart and End accordingly, but had no luck with disabling scroll zoom.

[mdrulis-neurosys]

nevermind, after further reading it i got it to do exactly just that.

[Shadowman4205]

How did you succeed with manual zoom?

[mdrulis-neurosys]

I keep current visibleTimeStart and visibleTimeEnd in state and keep track of it manually, also with custom logic in onTimeChange event.

[Shadowman4205]

I think did the same, i have button zoom in with
<a href="#" onClick={this.handleClickZoomIn}><i className="fa fa-search-plus fa-2x" aria-hidden="true"></i></a>
and zoom out
<a href="#" onClick={this.handleClickZoomOut}><i className="fa fa-search-minus fa-2x" aria-hidden="true"></i></a>

But i have 2 property of states for controling zoom (zoomStart ->for visibleTimeStart, zoomEnd -> for visibleTimeEnd)

Are you using buttons like this? I want implement a slider for zoom, any suggestion?

[theopolisme]

FYI for those stumbling upon this in the future, you do not necessarily need to write any custom logic.

You can instead using the undocumented timeline.zoomIn() and timeline.zoomOut() methods on the component (and/or build custom logic that incorporates timeline.changeZoom()).

For example, in your component:

<Timeline
  ref={r => { this.timeline = r; }}
  ...
/>

later...

this.timeline.zoomIn();
this.timeline.zoomOut();
this.timeline.changeZoom(CUSTOM_ZOOM_FACTOR); // 1 maintains current, <1 zooms in, >1 out

Here is the relevant section of Timeline.js.

Hope this helps!

[rkiyoto]

FYI for those stumbling upon this in the future, you do not necessarily need to write any custom logic.

You can instead using the undocumented timeline.zoomIn() and timeline.zoomOut() methods on the component (and/or build custom logic that incorporates timeline.changeZoom()).

For example, in your component:

<Timeline
  ref={r => { this.timeline = r; }}
  ...
/>

later...

this.timeline.zoomIn();
this.timeline.zoomOut();
this.timeline.changeZoom(CUSTOM_ZOOM_FACTOR); // 1 maintains current, <1 zooms in, >1 out

Here is the relevant section of Timeline.js.

Hope this helps!

this.timeline.zoomIn();
this.timeline.zoomOut(); 

Didin't work for me, it says it is not a function, but this.timeline.changeZoom(CUSTOM_ZOOM_FACTOR); works great, thanks!

[x4080]

Hi, I think the correct zoom is changeZoom(0.75) and changeZoom(1.25) like in the documentation and not between -1 and +1