FullCalendar资源时间线视图：非整月可见范围下月标签显示问题

问题现象 #

使用FullCalendar的resourceTimeline视图时，若visibleRange设置为整月范围（如2023-06-01至2023-08-31），滚动时顶部会正常显示月份名称标签；但当可见范围的起始/结束日期不是当月第一天/最后一天时（比如PrevQtr的2023-03-02至2023-05-31、NextQtr的2023-09-01至2023-12-04），月份标签会消失，仅显示日期。

问题原因 #

FullCalendar默认仅在可见范围包含完整月份的起始边界（当月第一天）时，才会渲染月份标签；非整月范围会自动隐藏月份标识，只显示日期。

解决方案 #

方案一：自定义dayHeaderContent强制控制标签显示

通过自定义头部内容函数，手动判断并渲染月份标签，可按需控制显示逻辑：

views:{
    resourceTimelineWeek: {
      slotDuration: { days: 1 }
    },
    CurrQtr: {
        type: 'resourceTimeline',
        visibleRange: function(currentDate) {
            return { start: '2023-06-01 00:00:00.000', end: '2023-08-31 23:59:59' }; 
        },
        buttonText: 'Curr Qtr'
    },
    NextQtr: {
        type: 'resourceTimeline',
        visibleRange: function(currentDate) {
            return { start: '2023-09-01 00:00:00.000', end: '2023-12-04 23:59:59' }; 
        },
        buttonText: 'Curr Qtr +1',
        // 自定义头部显示内容
        dayHeaderContent: function(arg) {
            const monthText = arg.date.toLocaleDateString('zh-CN', { month: 'long' });
            const dayNum = arg.date.getDate();
            // 每月第一天显示「月份+日期」，其余日期仅显示日期
            // 如果要所有日期都显示月份，直接返回 `${monthText} ${dayNum}` 即可
            return arg.date.getDate() === 1 ? `${monthText} ${dayNum}` : `${dayNum}`;
        }
    },
    PrevQtr: {
        type: 'resourceTimeline',
        visibleRange: function(currentDate) {
            return { start: '2023-03-02 00:00:00.000', end: '2023-05-31 23:59:59' }; 
        },
        buttonText: 'Curr Qtr -1',
        dayHeaderContent: function(arg) {
            const monthText = arg.date.toLocaleDateString('zh-CN', { month: 'long' });
            const dayNum = arg.date.getDate();
            return arg.date.getDate() === 1 ? `${monthText} ${dayNum}` : `${dayNum}`;
        }
    }
}

方案二：调整visibleRange为整月范围，隐藏不需要的日期槽

把visibleRange改成包含完整月份的起始/结束，再通过CSS隐藏不需要的日期槽：

1. 修改视图的visibleRange：

PrevQtr: {
    type: 'resourceTimeline',
    visibleRange: function(currentDate) {
        // 改为整月起始日期
        return { start: '2023-03-01 00:00:00.000', end: '2023-05-31 23:59:59' }; 
    },
    buttonText: 'Curr Qtr -1'
}

2. 添加CSS隐藏目标日期：

/* 隐藏3月1日的日期槽 */
.fc-day[data-date="2023-03-01"] {
    display: none;
}

方案对比 #

• 方案一无需修改原始范围，完全通过JS自定义显示逻辑，灵活性更高，适合复杂场景；
• 方案二操作简单，但需要手动匹配日期编写CSS，仅适合固定范围的视图。

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