Kendo ui 在kendo调度程序控件头中呈现数据-dateHeaderTemplate_Kendo Ui_Kendo Scheduler

Kendo ui 在kendo调度程序控件头中呈现数据-dateHeaderTemplate

kendo-ui

Kendo ui 在kendo调度程序控件头中呈现数据-dateHeaderTemplate,kendo-ui,kendo-scheduler,Kendo Ui,Kendo Scheduler,我正在使用剑道的调度程序控制。我试图在每天的标题中呈现每日容量（现在硬编码为30%），如下图所示。如何用数据源中的数据替换硬编码 <script src="Scripts/jquery.min.js"></script> <script src="Scripts/kendo.web.min.js"></script> <script> $(function () { $('#scheduler').kendoSc

我正在使用剑道的调度程序控制。我试图在每天的标题中呈现每日容量（现在硬编码为30%），如下图所示。如何用数据源中的数据替换硬编码

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

这是我使用的代码。我在下面的代码中硬编码了30%

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.mobile.min.css" />

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

但此数据源与日历事件相关，不包含每日容量。那么，如何设置来自不同数据源的每日容量数据呢

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

根据回答，我正在编辑问题

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

var实际值=[“30”、“20”、“10”、“50”、“70”、“60”、“40”]；//硬编码日容量但它只满足7天，我可能有全年的数据。数组可能不是正确的方法

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

来自服务器的示例数据：

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

var mydatafromApi = ({
    date:01/01/2013, 
    percentage=30%
  },
  {
    date:02/01/2013, 
    percentage=40%
  });

更新问题2

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

现在API数据源具有如下颜色属性

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

var mydatafromApi = ({
    date:01/01/2013, 
    percentage=30%,
    color = red
  },
  {
    date:02/01/2013, 
    percentage=40%
    color = blue
  });

我想把这些颜色作为调度程序单元格的背景

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

我试了如下

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

首次定义的颜色

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

          var actualColor = ["red", "blue","green", "yellow","blue", "red", "yellow"]; // hard coded daily color

  function scheduler_dataBound(e) {
      $.each($(".k-scheduler-header .k-scheduler-table th span.k-nav-day"),function(index, val) {
        var text = $(this).text();
        var newtext = text.replace("{dc}", actualDC[index]);
        $(this).text(newtext);
        $(this).backgroundcolor(actualColor[index]);
      });
    }

更新问题3 在调试“dateofHeader”时，我的值低于此值

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

标题脚本如下所示

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

 dateHeaderTemplate =  kendo.template("<span class='k-nav-day' data-dt='kendo.toString(date, 'dd/MM/yyyy')'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>")

dateHeaderTemplate=kendo.template（“#=kendo.toString（date，'dd/M'）#-（{dc}%）”）

然后我试着说，“这给了我这样的信息-”“kendo.toString（date，'dd/MM/yyyy'）”

您可以使用scheduler

databound

事件修改其日期头模板，并且您必须在该模板内使用字符串临时字符，该字符将被当前日期容量值替换

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

<span class='k-nav-day'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>

然后在调度程序

数据绑定

事件中更改其文本。我对此做了一个解释，希望这能帮助你理解

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

-----------更新问题1的答案--------------

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

如果您有一个对象集合而不是字符串数组，这并不重要。您可以替换它，但是在代码中进行另一个调整

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

您应该将日期值作为数据属性添加到日期头模板中

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

<script id="tmpDateHeader" type="text/x-kendo-template">
    <span class="k-nav-day" data-dt="#=kendo.toString(date, 'dd/MM/yyyy')#">
        <u>#=kendo.toString(date, "dd/M")#</u> - ({dc}%)
    </span>
</script>

您可以看到，我们在这里有数据属性

data dt

，它应该与日容量数据源的日期属性中的值具有相同的格式。然后，您必须获得该属性值才能在数据源中找到匹配的对象

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

// code in scheduler databound inside each scope
var dateOfHeader = $(this).data("dt"); // get date value from template
var matchData = // find in data source, where object.date == dateOfHeader 
var newtext = text.replace("{dc}", matchData.percentage);

我希望你能做剩下的事

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

-----------更新问题2的答案--------------

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

要更改其容器背景，请使用以下命令

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

$(this).parent().css("background-color", actualColor[index]);

您可以使用调度程序

databound

事件来修改其日期头模板，并且必须在该模板内使用字符串临时字符，该字符串将被当前日容量值替换

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

<span class='k-nav-day'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>