当 CustomView 具有 visibleRange 时，使用 previous/next 在 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'
}

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

我尝试了一些涉及 jQuery 的东西并且它大部分都有效，除了你必须先点击两次 prev/next 来改变可见范围（当你从旁边到前一个或反之亦然）。

我想要这个 :

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

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

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

现在可以完美运行了。

当 CustomView 具有 visibleRange 时，使用 previous/next 在 FullCalendar 中导航

Navigating in FullCalendar with previous/next when CustomView has a visibleRange

fullcalendar

custom-view

fullcalendar-scheduler

fullcalendar-4