FullCalendar timeline视图如何为单个资源绑定多份内容

修正现有逻辑错误 #

• 不能将同一份AJAX响应同时赋值给resources和events，两者是完全独立的数据集合：
  • resources数组只存放资源相关字段：必须包含id，自定义字段title、nhname、username、userdp直接放入资源对象即可
  • events数组单独存放日程事件字段：必须包含id、resourceId（和对应资源的id绑定）、start、end、title等核心字段
• 现有resourceLabelContent里的arg.resource.id == arg.resource.resourceId判断完全无效，resourceId是事件专属属性，资源对象本身不存在该属性，直接删除该判断即可；FullCalendar v5+版本自定义资源属性无需通过extendedProps获取，可直接读取。

修正后的实现代码 #

// 假设AJAX响应response结构为 { resources: [], events: [] }，可按实际接口结构调整拆分逻辑
resources: response.resources,
events: response.events,
resourceAreaColumns: [
  {
    field: 'title',
    headerContent: 'Staff details',
    // 该列自定义渲染头像+用户名组合内容
    resourceLabelContent: function(arg) {
      const user = document.createElement('div');
      user.className = "users-contents";
      const username = document.createElement('p');
      const userdp = document.createElement('img');
      userdp.className = 'userdp';
      // 直接读取资源自定义属性
      username.innerText = arg.resource.username;
      userdp.src = arg.resource.userdp;
      // 可选：头像加载失败兜底逻辑
      userdp.onerror = () => userdp.src = '本地默认头像地址';
      user.append(userdp, username);
      return { domNodes: [user] }
    }
  },
  {
    field: 'nhname',
    headerContent: 'NH Name'
  }
],

补充说明 #

• 如果不需要自定义DOM结构，简单文本类型的自定义字段直接在resourceAreaColumns里新增对应field即可自动渲染
• 可自行添加CSS调整.users-contents布局，比如设置为flex布局让头像和用户名横向排列

内容的提问来源于stack exchange，提问作者MOHAMMED ROSHAN M