React-calendar-timeline: How can I create "today" button?

[nicklive]

Hi,

I am trying to create some extra buttons to manipulate calendar, for example "today", "next day" etc.
How can I set some state to calendar, for example pass object to some callback like this:
{ timeStart: some timestamp or date, timeEnd: some timestamp or date, minZoom: 86400000, maxZoom: 86400000 }

Is it possible?

Thanks!

[idohu]

@finicknet you can use the defaultTimeStart and defaultTimeEnd props to define the visible time frame.
I would suggest setting those to state.start and state.end and manipulate them.

[malindamiller]

@idohu @finicknet I have tried to do this, and my state is being updated but the calendar is not changing. The items are reloading, but the calendar itself does not change to show the new times

[nicklive]

@idohu @malindamiller I have solved my problem with calling updateScrollCanvas function on timeline reference

this.timeline.updateScrollCanvas(start, end);

start, end are objects of moment.js.
my timeline has reference

<Timeline ref={(ref) => { this.timeline = ref; }} ...config />

Thanks you all for help

[mcMickJuice]

@malindamiller @finicknet you can control the start and end time that is displayed by passing in values via visibleTimeStart and visibleTimeEnd. @idohu s suggestion applies for initial render where you want to specify a default range. visibleTime properties affect visible timerange on rerenders.

Look to the readme for description of these fields: https://github.com/namespace-ee/react-calendar-timeline#visibletimestart-and-visibletimeend

I hesitate to follow @finicknet s solution as its calling updateScrollCanvas imperatively and breaks from react's data passing paradigm

[mcMickJuice]

I'm going to close this as the suggestion I provided should be able to accommodate. Let me know if you think otherwise and I can come up with an example.

[perfectstrong]

I'm not really fond of the idea manipulating directly with ref of @idohu but whenever visibleTimestart and visibleTimeend are set by the state, the canvas will preventing any further horizon scrolling, which is counter-intutive.

[Ilaiwi]

@perfectstrong for using this library in controlled mode you need need to provide visibleTimestart and visibleTimeend and the changes to them via onTimeChange prop