kendo ui - remote - ¿Cómo puedo personalizar una ventana emergente del programador de kendo?

kendo grid template

Question

Me pregunto si hay una forma de personalizar la ventana que aparece cuando haces clic en el programador de kendo. Me gustaría eliminar la casilla de verificación "evento de todo el día".

Answer 1

Puede usar el evento de edición del planificador para ocultar la casilla de verificación de todo el día.

  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
  },

Aquí hay una demostración en vivo: http://jsbin.com/ibOYUXev/1/edit

Answer 2

Puedes hacer esto usando plantillas. La documentación de la plantilla es muy escasa, pero la he usado como una versión recortada de la ventana de edición del programador.

En la declaración de navaja MVC, agregue .Editable(e => e.TemplateId("editor")) luego agregue una secuencia de comandos a su vista que contenga lo siguiente:

<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

Si busca un control total sobre el contenido del diálogo del editor, puede usar la plantilla :

modelo

<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>

planificador div

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

guión

<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>

Answer 4

También considere usar CSS:

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

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