如何实现联动FullCalendar、汇总当前可见周事件的日历下方Dashboard

核心实现思路 #

完全依托FullCalendar本身的内置API完成所有需求，不需要改动你已经写好的初始化、数据拉取、事件录入的现有代码，也不用额外手动绑定翻页按钮的点击事件：

• 用datesSet生命周期钩子做统一联动触发：这个钩子会在所有改变日历可见日期范围的操作完成后自动执行，不管是点击prev/next翻页、切换周视图、手动跳转日期、拖拽调整日历显示范围，都会触发这个回调，天生就实现了和翻页按钮的联动，无响应延迟。
• 回调参数会直接携带当前视图的精确起止时间，不需要手动计算一周的范围。
• 直接从日历实例中获取已经加载好的事件列表，不用重复发请求拉接口：通过calendar.getEvents()就能拿到所有已经渲染到日历上的事件，过滤出时间落在当前周的条目即可。
• 时长统计逻辑：遍历过滤后的周内事件，跳过没有设置有效结束时间的事件，把每个有效事件的实际时长累加，最后把结果渲染到日历下方的Dashboard面板即可。

代码实现示例 #

• 初始化日历的时候加上钩子配置（其余原有配置全部保留）：

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 你已经写好的所有初始化配置全部保留
  datesSet: (dateInfo) => {
    // 回调参数直接提供当前周的起止时间
    refreshWeekDashboard(dateInfo.start, dateInfo.end)
  }
})

• 编写Dashboard的更新、渲染函数：

function refreshWeekDashboard(weekStart, weekEnd) {
  // 直接取日历内部存储的全量已加载事件
  const allEvents = calendar.getEvents()
  // 过滤出当前周范围内的事件
  const weekScopeEvents = allEvents.filter(event => {
    return event.start >= weekStart && event.start < weekEnd
  })
  // 统计有效时长
  let totalDuration = 0
  const eventList = []
  weekScopeEvents.forEach(event => {
    // 跳过没有有效结束时间的无效事件
    if (!event.end) return
    const eventDuration = Math.round((event.end - event.start) / 1000 / 60)
    totalDuration += eventDuration
    eventList.push({
      name: event.title,
      duration: eventDuration
    })
  })
  // 把结果渲染到下方的DOM元素里
  document.querySelector('#dashboard-current-week-range').textContent = `${weekStart.toLocaleDateString()} 至 ${weekEnd.toLocaleDateString()}`
  document.querySelector('#dashboard-total-week-duration').textContent = `本周累计有效事件时长：${Math.floor(totalDuration / 60)}小时 ${totalDuration % 60}分钟`
  // 可按需扩展事件明细列表展示
  document.querySelector('#dashboard-event-detail').innerHTML = eventList.map(item =>
    `<li>${item.name}：${item.duration}分钟</li>`
  ).join('')
}

实用优化点 #

• 如果需要在用户修改事件时间、调整事件时长的时候，Dashboard的统计值实时同步，可以额外挂载eventChange钩子，在事件修改完成后直接调用refreshWeekDashboard，不需要用户手动刷新页面。
• 可以根据业务规则灵活调整事件过滤逻辑：比如排除非工作类事件、假期内的事件等，只要在过滤环节增加对应判断即可，不会影响核心的联动逻辑。

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