fullcalendar - 当 CustomView 具有可见范围时，使用上一个/下一个在 FullCalendar 中导航

Question

我的日历有一个特定的 View :它显示 31 天(显示当前日期之前的 4 天和之后的 27 天)

因此，我的 View 有一个动态的 visibleRange

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'
}

和previous/next don't seem to work when visibleRange is defined for a custom view .

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

我想要这个:

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

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

您可以在这个 CodePen 上找到代码

你能帮帮我吗？

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')

然后我在我的 customView 的设置中使用这个持续时间:

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

为了让我的 View 在当前日期前 4 天开始，在 Calendar 对象中，我设置了:

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

现在可以完美运行了。