FullCalendar中设置周视图起始日为周一的正确方法

在使用FullCalendar的resourceTimelineDay视图时，很多开发者会遇到一个常见问题：如何将默认的周日起始改为周一起始。本文将通过一个实际案例，详细介绍这个问题的解决方案。

问题现象

开发者在使用resourceTimelineDay视图时，发现无法通过设置firstDay参数来改变周起始日。即使设置了locale: 'vi'（越南语区域设置，通常以周一为一周起始），视图仍然显示当前日期作为起始日，而不是预期的周一。

问题根源

经过深入分析，发现这个问题源于对firstDay参数工作条件的误解。firstDay参数的有效性取决于视图的duration设置：

1. 当视图持续时间设置为按周显示时（如resourceTimelineWeek），firstDay参数会正常工作
2. 但在按天显示的视图（如resourceTimelineDay）中，firstDay参数不会影响显示

解决方案

要使周起始日设置生效，需要满足两个条件：

1. 使用周视图（如resourceTimelineWeek）
2. 正确配置duration参数

以下是正确的配置示例：

views: {
  resourceTimelineWeek: {
    type: 'resourceTimeline',
    duration: { weeks: 1 }, // 关键设置
    firstDay: 1, // 周一作为起始日
    slotDuration: { days: 1 }
  }
}

实现原理

FullCalendar的设计逻辑是：

• 日视图(Day)显示单天，不考虑周起始日
• 周视图(Week)显示完整周，遵循firstDay设置
• duration参数决定了视图的时间跨度

当duration设置为{weeks: 1}时，FullCalendar会识别这是一个周视图，从而应用firstDay的设置。

最佳实践

1. 明确需求：确定是需要日视图还是周视图
2. 正确配置：根据视图类型选择合适的参数
3. 区域设置：结合locale和firstDay实现国际化需求
4. 测试验证：在不同区域设置下测试显示效果

通过理解FullCalendar的视图逻辑和参数关系，开发者可以更灵活地控制日历显示方式，满足各种业务场景的需求。