使用资源类型resourceTimeline通过Fullcalendar进行日常导航

Question

我使用 Fullcalendar 插件。我想知道是否可以使用持续时间为 3 天的资源时间线视图类型从一天到一天而不是 3 天到 3 天进行导航。

谢谢

calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'fr',
    height: '95%',
    timeZone: 'Europe/Paris',
    initialView: 'resourceTimelineDay',
    views: {
        resourceTimelineDay: {
            buttonText: 'Calendrier',
            titleFormat: {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'}
        },
        listDay: {
            buttonText: 'Liste',
            titleFormat: {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'}
        },
        resourceTimelineTenDay: {
            type: 'resourceTimeline',
            duration: { days: 3 },

            buttonText: '3 days'
        }
    },                      
    aspectRatio: 1.5,
    headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: 'resourceTimelineDay,listDay,resourceTimelineTenDay'
    },
    validRange: {
        start: data.jourMin,
        end: data.jourMax
    },
    slotMinTime: '08:00:00',
    slotMaxTime: '24:00:00',
    slotMinWidth: 38,
    selectable: true,
    editable: true,
    eventOverlap: false,
    slotDuration: data.dureeSlot,
    resourceAreaHeaderContent: 'Lieux',
    resources: './assets/json/salles.php',
    events: './assets/json/events.php',
    resourceAreaWidth: "10%",
    resourceOrder: 'title'
});

编辑：我尝试过使用visibleRange，但它没有达到我想要的效果。我按照文档在我的自定义视图中添加了此代码

visibleRange: function(currentDate) {
        // Generate a new date for manipulating in the next step
        var startDate = new Date(currentDate.valueOf());
        var endDate = new Date(currentDate.valueOf());

        // Adjust the start & end dates, respectively
        startDate.setDate(startDate.getDate() - 1); // One day in the past
        endDate.setDate(endDate.getDate() + 2); // Two days into the future

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

Answer 1

事实证明，您可以使用

dayCount

选项轻松完成此操作，该选项保证在您的视图中显示设定的天数，但不会设置

duration

，这意味着导航按钮会导致它一次进步一天：

  resourceTimelineTenDay: {
    type: "resourceTimeline",
    buttonText: "3 days",
    dayCount: 3,
  }

现场演示：https://codepen.io/ADyson82/pen/YzgxBYe