FullCalendar v4.3.1中resourceGroupLabelDidMount不生效 无法展开指定资源

触发失败核心原因 #

• 代码语法错误：你提供的代码中'Doctor缺少闭合单引号，会导致整段JS逻辑解析失败，回调无法正常注册执行
• 回调配置位置错误：resourceGroupLabelDidMount属于资源区域列的专属钩子，必须配置在resourceAreaColumns的列参数内，放在日历顶层配置中不会生效
• 缺少必要基础配置：未设置resourceGroupField指定分组字段不会生成分组标签，未设置resourcesInitiallyExpanded: false开启默认折叠逻辑，都会导致回调无法触发
• 版本不兼容：该回调仅支持FullCalendar Scheduler v5.1.0及以上版本，低版本SDK无对应钩子

正确实现代码示例 #

const calendar = new FullCalendar.Calendar(calendarDom, {
  initialView: 'resourceTimelineWeek',
  resourceGroupField: 'role', // 指定按资源的role字段分组
  resourcesInitiallyExpanded: false, // 开启默认折叠，触发分组相关逻辑
  resourceAreaColumns: [
    {
      field: 'title',
      headerContent: '人员',
      // 回调放在资源列配置内才会生效
      resourceGroupLabelDidMount: (info) => {
        console.log("reached");
        if(info.groupValue === 'Doctor') {
          info.el.querySelector('.fc-datagrid-expander')?.click();
        }
      }
    }
  ],
  resources: [
    { id: 'd1', title: '王医生', role: 'Doctor' },
    { id: 'n1', title: '刘护士', role: 'Nurse' }
  ]
})
calendar.render()

兼容降级方案 #

如果调整后仍有适配问题，可以用全局视图渲染完成钩子实现相同效果：

datesSet: () => {
  document.querySelectorAll('.fc-datagrid-group').forEach(groupEl => {
    if(groupEl.textContent.trim() === 'Doctor') {
      groupEl.querySelector('.fc-datagrid-expander')?.click()
    }
  })
}

内容的提问来源于stack exchange，提问作者Meghana S Kumar