FullCalendar中initialDate与now属性的正确使用指南

初始日期设置的核心概念

FullCalendar作为一款功能强大的日历组件，提供了多种方式来控制日历的初始显示状态。其中initialDate和now是两个容易混淆但功能完全不同的属性。

属性功能解析

initialDate属性

initialDate属性用于设置日历初始显示的视图范围。当使用月视图(dayGridMonth)时，它决定了日历默认显示哪个月份；在周视图时，则决定显示哪一周。这个属性不会影响"今天"的高亮显示。

now属性

now属性才是真正控制日历中"今天"标记的配置项。它会覆盖系统默认的当前日期，用于高亮显示特定的日期单元格。

常见误区与解决方案

许多开发者误以为initialDate可以同时控制视图范围和"今天"标记，这是不正确的。正确的做法是：

1. 使用initialDate控制初始显示的月份/周
2. 使用now属性来设置"今天"的标记位置

var calendar = new FullCalendar.Calendar(calendarEl, {
    initialDate: '2025-01-29', // 控制初始显示2025年1月
    now: '2025-01-29',         // 将2025-01-29标记为"今天"
    initialView: 'dayGridMonth'
});

实际应用场景

1. 历史事件展示：显示过去某个月份，但不需要标记"今天"
2. 未来计划系统：显示未来日期并标记特定的"参考日"
3. 多时区应用：结合timeZone属性展示不同时区的当前日期

最佳实践建议

1. 明确区分视图控制(initialDate)和日期标记(now)的需求
2. 在需要同步两者时，同时设置这两个属性
3. 考虑时区因素，确保日期设置与预期一致
4. 对于复杂的日期逻辑，可以在beforeRender回调中进行额外处理

通过正确理解和使用这两个属性，开发者可以更精确地控制FullCalendar的初始状态和日期标记行为。