FullCalendar resourceTimeline视图：实现单日导航而非三日跳转

我使用FullCalendar插件，想在设置了3天时长的resourceTimeline视图中，实现点击prev/next按钮时单日切换，而不是默认的一次跳3天。试过在自定义视图里加visibleRange配置，但没达到预期效果。

基础代码如下：

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

要实现3天视图下的单日导航，核心是覆盖默认的导航步长，同时用visibleRange精准控制显示范围，具体操作如下：

1. 删除视图中的duration配置
   duration会强制导航步长等于视图时长，所以先把resourceTimelineTenDay里的duration: { days: 3 }删掉。

2. 修改视图配置，添加visibleRange和dateIncrement
   调整后的视图配置如下：

resourceTimelineTenDay: {
    type: 'resourceTimeline',
    buttonText: '3 days',
    visibleRange: function(currentDate) {
        // 以当前基准日期为起点，显示当天及后续2天，共3天
        const endDate = new Date(currentDate);
        endDate.setDate(currentDate.getDate() + 3);
        return { start: currentDate, end: endDate };
    },
    // 强制点击prev/next时单日跳转
    dateIncrement: { days: 1 }
}

3. 关键说明

• dateIncrement是控制导航步长的核心参数，设置为1天就会让prev/next按钮每次只切换1天。
• 之前的visibleRange代码把起始日期设为当前日期的前1天，导致视图基准日期和显示范围不匹配，所以没生效。现在调整为以当前基准日期为起点，确保每次跳转后都显示连续3天。

内容的提问来源于stack exchange，提问作者geoffreyH