FullCalendar V5 nowIndicator初始化位置异常问题求助

问题概述 #

使用FullCalendar V5的resourceTimelineMonth或resourceTimelineWeek作为initialView初始化日历组件时，nowIndicator（当前时间指示器）显示位置异常：

• 以resourceTimelineMonth初始化时，指示器固定在当日午夜位置
• 以resourceTimelineWeek初始化时，指示器固定在当前整点的起始位置
• 仅以resourceTimelineDay初始化时，指示器位置正确；且从日视图切换到周/月视图后，指示器能保持正确位置
• 该功能在V3版本正常，V5版本失效；从异常初始化的视图切换到日视图，无法解决后续的位置异常问题
• 需求：默认以月视图启动，且nowIndicator显示在正确的当前时间位置

复现代码 #

异常场景（resourceTimelineMonth初始化） #

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'America/Phoenix',
    nowIndicator: true,
    initialView: 'resourceTimelineMonth',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

正常场景（resourceTimelineDay初始化） #

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'America/Phoenix',
    nowIndicator: true,
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
  });

  calendar.render();
});

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.11.3/main.min.css" rel="stylesheet"/>
<div id='calendar'></div>

修复方案 #

问题根源是V5中resourceTimelineMonth/resourceTimelineWeek视图初始化时，nowIndicator的时间计算逻辑未正确解析当前时间的精确位置，而是默认对齐到日期/小时起始点。通过手动触发nowIndicator的更新逻辑即可修复：

在日历配置中添加datesSet事件监听，并在渲染完成后手动调用updateNow()方法，强制日历重新计算当前时间位置：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'America/Phoenix',
    nowIndicator: true,
    initialView: 'resourceTimelineMonth',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline',
    // 每次日期范围变更时刷新指示器
    datesSet: function() {
      calendar.updateNow();
    }
  });

  calendar.render();
  // 初始化完成后立即刷新一次
  calendar.updateNow();
});

效果验证 #

• 修复后默认以resourceTimelineMonth启动时，nowIndicator会准确显示当前时间对应的位置
• 切换到周/日视图时，指示器位置保持正确
• 翻页或日期范围变更时，指示器会自动更新到最新的当前时间位置

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