Hi, as a followup to viewtopic.php?p=117916#p117916, I'm trying to also make it work in the other direction, so that scrolling or zooming the timeline will make the two date pickers update to show the current start and end of the timeline view.
It looks like the visibleDateRangeChange
event is what we're supposed to use for this. I'm passing a handler that captures the start/end dates and storing them in React state, then feeding those states to my two date pickers (example code below). However, I'm seeing an issue with the startDate and endDate contained in the event - they are pointing to a date range that is wider than what the timeline is displaying.
This is causing a weird interaction since when I use the date pickers to change the start/end as described in the other thread, it makes a visibleDateRangeChange
event fire with different start/end times than what was passed to the zoomToSpan
, which in turn makes the date picker immediately update to a different value from what I just entered into it. Could you advise whether I'm doing something wrong here? Here's a rough excerpt of my code so far:
const [viewStartDate, setViewStartDate] = useState<Date | undefined>()
const [viewEndDate, setViewEndDate] = useState<Date | undefined>()
const [dateRangeUpdated, setDateRangeUpdated] = useState(false)
const handleDateRangeChange = useRef(
throttle(
(event: any) => {
setViewStartDate(event.startDate)
setViewEndDate(event.endDate)
setDateRangeUpdated(false)
},
500)
).current
const ganttRef = useRef<BryntumGantt>(null)
const ganttInstance = ganttRef.current?.instance
useEffect(() => {
if (
isDefined(viewStartDate) &&
isDefined(viewEndDate) &&
dateRangeUpdated
) {
ganttInstance?.zoomToSpan({
startDate: viewStartDate,
endDate: viewEndDate
})
setDateRangeUpdated(false)
}
}, [dateRangeUpdated, ganttInstance, viewEndDate, viewStartDate])
return (
// [...]
<DatePicker
value={viewStartDate}
onChange={(date) => {
setViewStartDate(date)
setDateRangeUpdated(true)
}}
/>
<DatePicker
value={viewEndDate}
onChange={(date) => {
setViewEndDate(date)
setDateRangeUpdated(true)
}}
/>
// [...]
<BryntumGantt
ref={ganttRef}
// [...]
onVisibleDateRangeChange={handleDateRangeChange}
/>
)
Cheers,
Taiki