有没有一种方法可以将react-calendar-timeline的滚动窗口限制为仅可见时间的开始和结束？

问题描述

我正在使用react-calendar-timeline，并且在那里我使用了与this example非常相似的受控滚动功能。现在，您可以看到仅显示了当前日期，但用户可以将画布滚动到上一个和下一个日期。这意味着画布的宽度是daterange的3倍。 我只需要将当前日期仅显示在画布中即可。

谢谢。

解决方法

我也在文档和互联网上挖掘了很多东西来解决这个问题。
终于我明白了。我正在与处于相同情况的人分享我的解决方案。

创建 defaultTimeRange 并设置为 min 和 max 缩放道具以禁用缩放。

然后为 onTimeChange 编写一个处理函数，并使用第三个回调函数来禁用滚动。

// Set the visible start and date somewhere in the beginning like this using useEffect
setVisibleTimeStart(currentDate.startOf("day").valueOf());
setVisibleTimeEnd(currentDate.endOf("day").valueOf());

...

const defaultTimeRange = visibleTimeEnd - visibleTimeStart;

<Timeline
    ...
    minZoom={defaultTimeRange} <--- To disable Zoom
    maxZoom={defaultTimeRange} <--- To disable Zoom
    onTimeChange={(_start,_end,updateScrollCanvas) => {
      updateScrollCanvas( <--- To disable Scroll
        moment(visibleTimeStart).valueOf(),moment(visibleTimeEnd).valueOf()
      );
    }}
  >

然后你必须像这样覆盖一个css类

.react-calendar-timeline .rct-scroll{
   overflow-x: hidden !important;
}