FullCalendar v5 如何仅给子级资源列设置自定义图标

核心逻辑是在resourceLabelDidMount回调中新增层级判断，仅当当前资源属于二级或三级时才插入图标，两种实现方式如下：

方式一：预处理资源数据新增层级标记（性能最优） #

提前递归给所有资源添加level字段标记层级，初始化日历时传入处理后的资源数据即可，代码示例：

// 递归为资源添加层级标记
function addResourceLevel(resources, parentLevel = 0) {
  return resources.map(res => {
    const currentLevel = parentLevel + 1
    const processedRes = { ...res, level: currentLevel }
    // 处理子资源
    if (res.children?.length) {
      processedRes.children = addResourceLevel(res.children, currentLevel)
    }
    return processedRes
  })
}

// FullCalendar 初始化配置
const calendar = new Calendar(calendarEl, {
  // 其他原有配置保持不变
  resources: addResourceLevel(yourOriginalResourceArr), // 传入处理后的资源
  resourceLabelDidMount: function(data) {
    // 仅二级、三级资源插入图标
    if (data.resource.level === 2 || data.resource.level === 3) {
      const icon = document.createElement('strong');
      icon.innerHTML = '<i class="fa fa-check"></i>';
      data.el.querySelector('.fc-datagrid-cell-main').appendChild(icon);
    }
  }
})

方式二：回调内实时计算层级（无需修改原始资源） #

如果不想改动原始资源数据，可以在回调内通过parentId递归查询父级资源计算当前层级，代码示例：

resourceLabelDidMount: function(data) {
  // 计算当前资源层级
  let currentLevel = 1
  let currentRes = data.resource
  while (currentRes.parentId) {
    currentLevel++
    currentRes = data.view.calendar.getResourceById(currentRes.parentId)
    if (!currentRes) break
  }
  // 仅二级、三级资源插入图标
  if (currentLevel === 2 || currentLevel === 3) {
    const icon = document.createElement('strong');
    icon.innerHTML = '<i class="fa fa-check"></i>';
    data.el.querySelector('.fc-datagrid-cell-main').appendChild(icon);
  }
}

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