FullCalendar 4 Angular自定义5天资源视图无法固定显示周一至周五

我帮你搞定这个问题！你遇到的核心问题是：只设置duration: { days: 5 }时，FullCalendar会默认从当前日期开始往后推5天来渲染视图，而不是自动对齐到周一至周五的工作日区间，这就导致了周五时显示跨周内容、非周一打开时只显示到周五的情况。

要强制日历始终显示周一至周五这5天，关键是通过visibleRange配置来精准锁定视图的起始和结束日期，而不是依赖默认的duration逻辑。

具体解决方案 #

修改你的自定义视图配置，添加visibleRange函数，手动计算当前日期所在周的周一至下周一（因为FullCalendar的end日期是排他的，下周一作为结束点刚好包含周一至周五）：

resourceTimeGridFiveDay: {
  type: "resourceTimeGrid",
  duration: { days: 5 },
  buttonText: "5 days",
  visibleRange: function(currentDate) {
    // 计算当前日期所在周的周一
    // 注：如果你的日历已经设置firstDay: 1（周一为一周起始），则无需add(1, 'day')
    const weekStart = currentDate.clone().startOf('week').add(1, 'day');
    // 结束日期设为下周一（排他，确保包含周一至周五共5天）
    const weekEnd = weekStart.clone().add(5, 'days');
    return { start: weekStart, end: weekEnd };
  }
}

关键细节说明 #

1. 周起始调整：FullCalendar默认一周从周日开始，所以用startOf('week')会得到周日，我们需要加1天切换到周一。如果你的全局日历配置已经设置了firstDay: 1（将周一设为一周起始），则可以去掉.add(1, 'day')这一步。
2. 结束日期逻辑：设置end为周一加5天（即下周一），因为FullCalendar的视图范围是[start, end)左闭右开区间，这样刚好覆盖周一到周五的所有时间。

效果验证 #

• 当你在周三打开日历：视图会显示本周一至周五，而非周三至下周二
• 当你在周五打开日历：视图会显示本周一至周五，而非周五至下周二
• 无论当前是周内哪一天，视图都会固定显示完整的5个工作日区间

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