在 FullCalendar 中使用上一个/下一个导航，当自定义视图具有可见范围时

Question

我的日历有一个特定的视图：它显示31天(显示当天前4天，后27天(

因此，我有一个动态可见范围供我查看

let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');

[...]

type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}

当为自定义视图定义 visibleRange 时，上一个/下一个似乎不起作用。

我尝试了一些涉及jQuery的东西，它大部分都有效，除了你必须在上一个/下一个上先单击两次才能更改可见范围(当你从下一个到上一个时，你也必须点击两次，反之亦然(。

我想要这个：

calendar.setOption('visibleRange', {
start: INIT, 
end: INIT_END
})

工作，但在我的实现中，它只工作一次，当它被触发时，单击按钮不再有效。

您可以在此代码笔上找到代码

你可以帮我吗？

Answer 1

好的，一位同事的同事引导我找到了解决方案，非常感谢他。

我没有使用visibleRange并尝试使用jQuery(非常粗暴(操作FullCalendar的数据，而是计算了两个时刻之间的差异，以便有一个持续时间：

const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')

然后我在自定义视图的设置中使用此持续时间：

resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}

为了使我的视图在当前日期前 4 天开始，在日历对象中，我设置：

[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]

现在工作完美无缺。