React-calendar-timeline: Limit Days

Created on 10 Nov 2017 · 4Comments · Source: namespace-ee/react-calendar-timeline

How can I limit the calendar to yesterday, today and tomorrow?

thanks

Source

sabina4

Most helpful comment

To build on what @Biohazord said, heres a working example that limits the range from yesterday to tomorrow:

https://codesandbox.io/s/m31jpjn9oy

It's a little buggy on scroll but gives an idea of how to accomplish this.

mcMickJuice on 12 Nov 2017

👍2

All 4 comments

I had a similar situation. I wanted to display just a slice of a single day and then manually control navigation between days. To do this I used the Timeline components visibleStartTime, visibielEndTime, and onTimeChange props.

For your case you'll probably need to use those props as well as the onBoundsChange, canvasTimeStart, and canvasTimeEnd prop in a similar way.

In my use case I defined dayStart and dayEnd variables which are JavaScript Dates. I then used it as follows with the props.

visibleTimeStart={dayStart}
visibleTimeEnd={dayEnd}
// Prevents the time from changing beyond our selected date.
onTimeChange={(visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => updateScrollCanvas(dayStart, dayEnd)}