Question

示例：一天中有很多医生可用，因此每位医生都需要一栏来预约患者。我想在Kendo Scheduler for Day视图中使用类似下面的图片：

Answer 1

您可以使用Kendo Scheduler的资源功能。请参见代码段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  group: {
    resources: ["Doctors"],
    date: true
  },
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Appointment 1",
      doctorID: 1
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Appointment 2",
      doctorID: 4
    }
  ],
  resources: [
    {
      field: "doctorID",
      name: "Doctors",
      dataColorField: "color",
      dataSource: [
        { text: "D1", value: 1, color: "orange" },
        { text: "D2", value: 2, color: "green" },
        { text: "D3", value: 3, color: "blue" },
        { text: "D4", value: 4, color: "brown" },
        { text: "D5", value: 5, color: "purple" },
        { text: "D6", value: 6, color: "yellow" }
      ]
    }
  ]
});
</script>
</body>
</html>

在kendo调度程序中添加自定义列，其中包含一个用于日视图的默认列

1 个答案: