How can I customize a kendo scheduler popup window - kendo-ui

Question

I'm wondering if there is a way to customize the window that pops up when you click on the kendo scheduler. I would like to remove the "all day event" checkbox.

Answer 1

Also consider using CSS:
div[data-container-for='isAllDay'] {
display: none;
}
label[for='isAllDay'] {
display: none;
}

Answer 2

You can do this using templates. The template documentation is very sparce, but I have used this as a trimmmed-down version of the scheduler edit window.
In the MVC razor declaration add .Editable(e => e.TemplateId("editor"))
then add a script to your view that contains the following:
<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>

Answer 3

You can use the edit event of the scheduler to hide the all day checkbox.
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
},
Here is a live demo: http://jsbin.com/ibOYUXev/1/edit

Answer 4

If you're looking for a full control over the contents of the editor dialog, you can use template:
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>
scheduler div
<div id="scheduler"></div>
script
<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>