React-calendar-timeline: Block dragging of canvas and custom render of header

[x1mrdonut1x]

• is it possible to change the renderer for the header?
• Is it possible to block dragging of the canvas?

Thanks

[mcMickJuice]

Is it possible to block dragging of the canvas

Do you want to prevent the timeline from scrolling altogether or want to prevent scrolling timeline via dragging canvas?

is it possible to change the renderer for the header

Do you want to change how the labels are rendered (so the contents of each element in the header) or do you want additional customization? If you could provide a use case for this I might be able to help you :)

[x1mrdonut1x]

Sorry I wasn't specific!

My use case would be to scroll the timeline day by day using a button in the header (or somewhere). I don't really like how the click-and-drag works, so I'd like to switch it off, hence the button for going to the next/prev day.

Is this achievable using your API?

Thanks!

[tuancaraballo]

Yes, this is achievable.
Basically what you need to do is the following:

Step 1: Set the limits of your default start and end times:

to a day or a week, you can do so using moment:

  this.state = {
         defaultTimeStart : moment().startOf('day').add(7, 'hour'),   **// 7am -to - 7pm**
           defaultTimeEnd : moment().startOf('day').add(19, 'hour'), 
   }

Step 2: In the component, set the default times to:

<Timeline   
               ....
               defaultTimeStart={defaultTimeStart}
               defaultTimeEnd={defaultTimeEnd}
               canvasTimeStart= {defaultTimeStart}
               canvasTimeEnd={defaultTimeEnd}
               visibleTimeStart={defaultTimeStart}
               visibleTimeEnd={defaultTimeEnd}
/>

Step 3: Define your onTimeChangeHandler using the default start and end times:

onTimeChangeHandler = (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => {
    let {defaultTimeStart, defaultTimeEnd} = this.state;
    const minTime = _.cloneDeep(defaultTimeStart).valueOf()
    const maxTime = _.cloneDeep(defaultTimeEnd).valueOf()
    if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
      updateScrollCanvas(minTime, maxTime)
    } else if (visibleTimeStart < minTime) {
      updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
    } else if (visibleTimeEnd > maxTime) {
      updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
    } else {
      updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
    }
  }

Step 4: Define your Next Day or Next Week and Previous Day or Previous Week
So that when the user clicks on those buttons, basically you change the defaultTimes:

 goToNextDay = () => {
    let {defaultTimeStart, defaultTimeEnd} = this.state;
    defaultTimeStart.add(1, 'day');
    defaultTimeEnd.add(1, 'day');
    this.setState({defaultTimeStart, defaultTimeEnd})
  }

  goToPreviousDay = () => {
    let {defaultTimeStart, defaultTimeEnd} = this.state;
    defaultTimeStart.subtract(1, 'day');    **subtract one day to go to previous day**
    defaultTimeEnd.subtract(1, 'day');

    this.setState({defaultTimeStart, defaultTimeEnd})
  }

Step 5: Connect the buttons to the handlers and there you go!

Hope it helps :-)

[mcMickJuice]

@x1mrdonut1x does @tuancaraballo 's awesome example help you out?

[x1mrdonut1x]

Yes, thank you!