如何自定义剑道调度程序弹出窗口答案

【问题标题】：How can I customize a kendo scheduler popup window如何自定义剑道调度程序弹出窗口
【发布时间】：2013-12-18 07:26:35
【问题描述】：

我想知道是否有一种方法可以自定义单击剑道调度程序时弹出的窗口。我想去掉“全天活动”复选框。

【问题讨论】：

docs.kendoui.com/api/web/…

【解决方案1】：

也可以考虑使用 CSS：

div[data-container-for='isAllDay'] {
    display: none;
}

label[for='isAllDay'] {
    display: none;
}

【讨论】：

谢谢。似乎是最简单的方法。

【解决方案2】：

您可以使用模板来做到这一点。模板文档非常少，但我已将其用作调度程序编辑窗口的精简版。

在 MVC 剃须刀声明中添加 .Editable(e => e.TemplateId("editor")) 然后在您的视图中添加一个脚本，其中包含以下内容：

<script id="editor" type="text/x-kendo-template">
<div class="k-edit-label">
        <label for="title">Title</label></div>
    <div class="k-edit-field" data-container-for="title">
        <input type="text" class="k-input k-textbox" name="title" data-bind="value: title"></div>
    <div class="k-edit-label">
        <label for="start">Start</label></div>
    <div class="k-edit-field" data-container-for="start"><span style="display: none;" class="k-widget k-datetimepicker k-header"><span class="k-picker-wrap k-state-default">
        <input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span></span></span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="    value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span></div>
    <div class="k-edit-label">
        <label for="recurrenceRule">Repeat</label></div>
    <div class="k-edit-field" data-container-for="recurrenceRule">
        <div data-bind="value: recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
    </div>
    <div class="k-recur-view"></div></script>

【讨论】：

【解决方案3】：

您可以使用调度程序的edit 事件来隐藏全天复选框。

  edit: function(e) {
    e.container
     .find("[name=isAllDay]") // find the all day checkbox
     .parent() // get its wrapper
     .prev() // get the label wrapper
     .remove() // remove the label wrapepr
     .end() // get back to the checkbox wrapper
     .remove(); // remove the checkbox wrapper
  },

这是一个现场演示：http://jsbin.com/ibOYUXev/1/edit

【讨论】：

【解决方案4】：

如果您希望完全控制编辑器对话框的内容，可以使用template：

模板

<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p>
   <label>Title: <input name="title" /></label>
</p>
<p>
   <label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
<p>
   <label>Start: <input data-role="datetimepicker" name="end" /></label>
</p>
</script>

调度器 div

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

脚本

<script>
$("#scheduler").kendoScheduler({
   date: new Date("2013/6/6"),
   editable: {
   template: $("#editor").html()
    },
   views: [
   { type: "day" }
   ],
   dataSource: [
    {
    id: 1,
    start: new Date("2013/6/6 08:00 AM"),
    end: new Date("2013/6/6 09:00 AM"),
    title: "Interview"
    }
   ]});
</script>

【讨论】：