能否按类型分组Kendo UI Scheduler资源？酒店预订场景需求

没问题，Kendo UI Scheduler完全支持这种按房型这类非时间/方位维度分组资源的需求，而且实现起来逻辑很清晰。下面是具体的实现思路和可直接复用的代码示例：

核心实现思路 #

1. 定义两个关联的资源类型：roomType（房型，比如标准房、豪华房）和roomNumber（房间号，每个房型对应专属的房间号集合）
2. 给房间号资源添加parentId字段，关联对应的房型ID，建立层级关联关系
3. 配置Scheduler的group属性，指定按roomType分组，让每个房型区块下只显示其专属的房间号
4. 自定义资源显示模板，让界面更清晰地区分房型和房间号

具体代码实现 #

1. 准备关联的资源数据源 #

// 房型资源数据：定义不同房型的标识、名称和区分色
const roomTypes = [
  { value: 'standard', text: '标准房', color: '#51a0ed' },
  { value: 'deluxe', text: '豪华房', color: '#f59e0b' },
  { value: 'suite', text: '套房', color: '#10b981' }
];

// 房间号资源数据：通过parentId绑定对应房型，确保每个房型的房间号独立
const roomNumbers = [
  { value: '101', text: '101', parentId: 'standard' },
  { value: '102', text: '102', parentId: 'standard' },
  { value: '103', text: '103', parentId: 'standard' },
  { value: '201', text: '201', parentId: 'deluxe' },
  { value: '202', text: '202', parentId: 'deluxe' },
  { value: '301', text: '301', parentId: 'suite' }
];

2. 配置Scheduler的资源与分组规则 #

<div id="scheduler"></div>

<script>
$("#scheduler").kendoScheduler({
  date: new Date("2024/6/1"),
  startTime: new Date("2024/6/1 07:00 AM"),
  endTime: new Date("2024/6/1 10:00 PM"),
  views: ["day", "week"],
  // 核心分组配置：按房型垂直分组
  group: {
    resources: ["roomType"],
    orientation: "vertical"
  },
  resources: [
    {
      field: "roomTypeId",
      name: "roomType",
      dataSource: roomTypes,
      title: "房型",
      // 自定义房型标题模板，用对应颜色标记
      template: "<span style='background:#: color #; padding:2px 8px; border-radius:4px; color:white;'>#: text #</span>"
    },
    {
      field: "roomId",
      name: "roomNumber",
      dataSource: {
        data: roomNumbers,
        schema: {
          model: {
            id: "value",
            parentId: "parentId" // 指定父子关联字段，让房间号自动归属对应房型
          }
        }
      },
      title: "房间号"
    }
  ],
  // 示例预订数据，绑定对应的房型和房间号
  dataSource: [
    {
      id: 1,
      title: "客人A预订",
      start: new Date("2024/6/1 09:00 AM"),
      end: new Date("2024/6/1 11:00 AM"),
      roomTypeId: "standard",
      roomId: "101"
    },
    {
      id: 2,
      title: "客人B预订",
      start: new Date("2024/6/1 02:00 PM"),
      end: new Date("2024/6/1 04:00 PM"),
      roomTypeId: "deluxe",
      roomId: "201"
    }
  ]
});
</script>

关键细节说明 #

• 资源关联逻辑：通过parentId字段，Scheduler会自动过滤房间号资源，只显示当前房型下的专属房间，不会出现重复的房间号集合
• 分组灵活性：如果需要同时按多个维度分组（比如房型+日期），只需要在group.resources中添加对应的资源即可，例如["roomType", "date"]
• 界面定制：通过template属性可以完全自定义资源的显示样式，让房型和房间号的区分更直观

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