如何在Kendo Scheduler日视图中添加自定义列实现按医生分栏预约

嘿，刚好搞定过类似的需求，给你唠唠具体怎么实现，亲测能用！

1. 先把数据源准备到位 #

首先你的预约数据里得带上医生ID/姓名的关联字段，同时单独准备好医生列表，示例如下：

// 坐诊医生列表
const doctors = [
  { id: 1, name: "张医生" },
  { id: 2, name: "李医生" },
  { id: 3, name: "王医生" }
];

// 患者预约数据示例
const appointments = [
  {
    id: 1,
    title: "患者A（复诊）",
    start: new Date("2024-05-20T09:00:00"),
    end: new Date("2024-05-20T10:00:00"),
    doctorId: 1 // 和医生列表的id对应
  },
  {
    id: 2,
    title: "患者B（初诊）",
    start: new Date("2024-05-20T10:30:00"),
    end: new Date("2024-05-20T11:30:00"),
    doctorId: 2
  }
  // 更多预约数据...
];

2. 配置Scheduler实现多列分栏 #

Kendo Scheduler默认日视图是单列，我们可以通过资源分组来实现按医生拆分列，核心配置如下：

$("#scheduler").kendoScheduler({
  date: new Date("2024-05-20"),
  dataSource: appointments,
  views: [
    {
      type: "day",
      // 启用资源分组，按医生横向分栏
      group: {
        resources: ["doctors"],
        orientation: "horizontal"
      },
      // 自定义列头显示医生姓名
      resourceHeaderTemplate: "#: data.text #"
    }
  ],
  // 定义医生资源关联规则
  resources: [
    {
      field: "doctorId", // 对应预约数据里的关联字段
      name: "doctors",
      dataSource: doctors,
      title: "坐诊医生",
      valueField: "id", // 医生列表的唯一标识字段
      textField: "name" // 显示在列头的字段
    }
  ],
  // 其他基础配置
  editable: true, // 允许编辑预约
  startTime: new Date("2024-05-20T08:00:00"),
  endTime: new Date("2024-05-20T18:00:00")
});

3. 样式微调（可选） #

如果觉得默认列宽不合适，或者想加个hover高亮，可以自定义CSS：

/* 调整医生列的宽度 */
.k-scheduler-resources-horizontal .k-scheduler-table td {
  width: 220px;
}
/* 鼠标悬停列头时高亮 */
.k-scheduler-resource-header.k-state-hover {
  background-color: #f0f4f8;
}

4. 避坑小提示 #

• 一定要保证预约数据的doctorId和医生列表的id完全匹配，不然预约会找不到对应的列
• 如果需要支持一个患者预约多个医生，可以把资源配置里的multiple设为true，但你的场景一对一就不用改
• 编辑预约时，Scheduler会自动弹出带医生选择的下拉框，不用额外写逻辑

这样配置完，日视图就会自动按每位医生拆分成独立列，患者预约都会精准显示在对应医生的列里，完全符合你的需求！

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