首页 > 解决方案 > 如何在 Fullcalendar v4 中使用上一个/下一个时段在时间线视图中设置自定义可见范围?

问题描述

如何在 Fullcalendar 的时间线视图中设置自定义可见范围?我可以设置它,但是指向下一个或上一个范围的箭头不起作用。

我使用此代码,FC2020-08-01 - 2020-09-30在加载后正确显示日期范围。但是当我单击 FC 顶部的上一个/下一个箭头移动到另一个时期时,什么也没发生。为什么?Validrange足够长。

我的目标是,如果可见范围设置如上面的示例(两个月),下一个时期应该是2020-10-01 - 2020-11-30(两个月),上一个时期应该是相同的。但可见范围可以不同,由用户选择。

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  defaultView: 'resourceTimeline',

  /*
  defaultView: 'resourceTimeline30',
  views: {
    resourceTimeline30: {
      type: 'resourceTimeline',
      duration: {
        days: 30
      }
    }
  },
  */

  firstDay: 1,
  slotWidth: 22,
  snapDuration: '12:00',
  slotDuration: '12:00',
  slotLabelInterval: '24:00',
  slotLabelFormat: [{ weekday: 'short', day: 'numeric', month: 'long' }],
  validRange: {
    start: '2019-08-14',
    end: '2021-08-13'
  },
  visibleRange: function(currentDate) {
    var startDate = new Date(currentDate.valueOf());
    var endDate = new Date(currentDate.valueOf());

    startDate.setDate(startDate.getDate() - 30);
    endDate.setDate(endDate.getDate() + 30);

    return { start: startDate, end: endDate };
  }
});

标签: fullcalendarfullcalendar-4

解决方案


推荐阅读