调整Kendo UI Scheduler水平资源分组的参会者表头名称换行

要让水平分组的参会者表头名称自动换行，将姓氏显示在第二行，可通过修改分组表头模板样式和覆盖默认CSS规则实现，具体步骤如下：

解决方案 #

1. 调整分组表头模板：在表头模板的文本容器中添加强制换行的CSS样式，允许文本在空格处自动换行。
2. 覆盖Scheduler默认表头样式：移除表头单元格默认的不换行限制，确保样式生效。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
    <style>
        /* 覆盖Scheduler表头单元格的默认不换行样式 */
        .k-scheduler-group-header .k-scheduler-column-header {
            white-space: normal;
            word-break: break-word;
            /* 可选：设置固定宽度，确保换行效果明显 */
            width: 100px;
        }
    </style>
</head>
<body>
  
<script id="groupHeaderTemplate" type="text/x-kendo-template">
  <!-- 在模板中添加换行样式，确保文本容器支持换行 -->
  <strong style="color: #=color#; display: block; white-space: pre-line;">#=text#</strong>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  groupHeaderTemplate: $("#groupHeaderTemplate").html(),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      isAllDay: true,
      title: "Interview",
      attendees: [1,2]
    }
  ],
  group: {
    resources: ["Attendees"],
    orientation: "horizontal"
  },
  resources: [
    {
      field: "attendees",
      name: "Attendees",
      dataSource: [
       { value: 1, text: "Alex Lastname" },
       { value: 2, text: "Bob Lastname" }
      ],
      multiple: true
    }
  ]
});
</script>
</body>
</html>

关键说明 #

• white-space: pre-line：让文本在换行符和空格处自动换行，同时合并连续空格，适合姓名这种有空格分隔的场景。
• .k-scheduler-group-header .k-scheduler-column-header：针对分组表头的单元格，移除默认的white-space: nowrap限制，确保样式生效。
• 可选设置width：固定表头单元格宽度，能更直观地看到换行效果，可根据实际需求调整。

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