csskendo-uischedulerkendo-scheduler

Adjust Header Attendee name in horizontal resources grouping Kendo UI Scheduler

i am using the horizontal resources grouping in Kendo UI Scheduler and I want to adjust the header attendee name same like word wrap css property so that last name will come in second line. please help me to achieve this. related dojo link

<!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>
</head>
<body>
  
<script id="groupHeaderTemplate" type="text/x-kendo-template">
  <strong style="color: #=color#">#=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>
Solution

  • You can do it with plain CSS, here I use white-space: pre-line; and width: min-content; to break the lines with spaces, thus splitting the first and last name. Then we can use text-align: center to center this content.

    .k-scheduler-header th {
  text-align: center;
}

.k-scheduler-header th strong {
  white-space: pre-line;
  width: min-content;
  display: inline-block;
  text-align: center;
}

    Dojo Demo