Telerik UI for JSP: Scheduler Custom editor template

<%@page import="java.util.HashMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="demo" tagdir="/WEB-INF/tags"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<c:url value="/scheduler/resources/read" var="readUrl" />
<c:url value="/scheduler/resources/create" var="createUrl" />
<c:url value="/scheduler/resources/update" var="updateUrl" />
<c:url value="/scheduler/resources/destroy" var="destroyUrl" />

<%
    Date date = new SimpleDateFormat("yyyy/MM/dd").parse("2013/6/13");

    Date startTime = new SimpleDateFormat("yyyy/MM/dd hh:mm").parse("2013/6/13 7:00");

    ArrayList<HashMap<String, Object>> people = new ArrayList<HashMap<String, Object>>();

    HashMap<String, Object> alex = new HashMap<String, Object>();
    alex.put("text", "Alex");
    alex.put("value", 1);
    alex.put("color", "#f8a398");
    people.add(alex);
    HashMap<String, Object> bob = new HashMap<String, Object>();
    bob.put("text", "Bob");
    bob.put("value", 2);
    bob.put("color", "#51a0ed");
    people.add(bob);
    HashMap<String, Object> charlie = new HashMap<String, Object>();
    charlie.put("text", "Charlie");
    charlie.put("value", 3);
    charlie.put("color", "#56ca85");
    people.add(charlie);

    ArrayList<HashMap<String, Object>> rooms = new ArrayList<HashMap<String, Object>>();

    HashMap<String, Object> room1 = new HashMap<String, Object>();
    room1.put("text", "Meeting Room 101");
    room1.put("value", 1);
    room1.put("color", "#6eb3fa");
    rooms.add(room1);
    HashMap<String, Object> room2 = new HashMap<String, Object>();
    room2.put("text", "Meeting Room 102");
    room2.put("value", 2);
    room2.put("color", "#f58a8a");
    rooms.add(room2);

%>
<demo:header />
    <kendo:scheduler name="scheduler" timezone="Etc/UTC" height="600" date="<%= date %>" startTime="<%= startTime %>">
   <kendo:scheduler-editable>
    <kendo:scheduler-editable-template>
        <script>
            function(e) {

                return $("#editorTemplate").html();
                // Code to handle the template event.
            }
        </script>
    </kendo:scheduler-editable-template>
</kendo:scheduler-editable>
        <kendo:scheduler-views>
            <kendo:scheduler-view type="day" />
            <kendo:scheduler-view type="week" selected="true" />
            <kendo:scheduler-view type="month"  />
            <kendo:scheduler-view type="agenda" />
        </kendo:scheduler-views>
        <kendo:scheduler-resources>
            <kendo:scheduler-resource field="roomId" title="Room">
                <kendo:dataSource data="<%= rooms %>" />
            </kendo:scheduler-resource>
            <kendo:scheduler-resource field="attendees" title="Attendees" multiple="true">
                <kendo:dataSource data="<%= people %>" />
            </kendo:scheduler-resource>
        </kendo:scheduler-resources>
        <kendo:dataSource batch="true">
             <kendo:dataSource-schema>
                <kendo:dataSource-schema-model id="meetingId">
                     <kendo:dataSource-schema-model-fields>
                         <kendo:dataSource-schema-model-field name="meetingId" type="number" />
                         <kendo:dataSource-schema-model-field name="title" defaultValue="No title" type="string" />
                         <kendo:dataSource-schema-model-field name="description" type="string" />
                         <kendo:dataSource-schema-model-field name="isAllDay" type="boolean" />
                         <kendo:dataSource-schema-model-field name="recurrenceRule" type="string" nullable="true"/>
                         <kendo:dataSource-schema-model-field name="attendees" nullable="true"/>
                         <kendo:dataSource-schema-model-field name="recurrenceId" type="number" nullable="true" />
                         <kendo:dataSource-schema-model-field name="recurrenceException" type="string" nullable="true" />
                         <kendo:dataSource-schema-model-field name="roomId" nullable="true"/>
                         <kendo:dataSource-schema-model-field name="start" type="date" />
                         <kendo:dataSource-schema-model-field name="end" type="date" />
                    </kendo:dataSource-schema-model-fields>
                </kendo:dataSource-schema-model>
            </kendo:dataSource-schema>
            <kendo:dataSource-transport>
                <kendo:dataSource-transport-create url="${createUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-update url="${updateUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-destroy url="${destroyUrl}" dataType="json" type="POST" contentType="application/json" />
                <kendo:dataSource-transport-parameterMap>
                    <script>
                        function parameterMap(options, type) {
                            if(type==="read"){
                                return JSON.stringify(options);
                            } else {
                                return JSON.stringify(options.models);
                            }
                        }
                    </script>
                </kendo:dataSource-transport-parameterMap>
            </kendo:dataSource-transport>
        </kendo:dataSource>
    </kendo:scheduler>

    <script id="editorTemplate"  type="text/x-kendo-template">
    <div class="k-edit-label">
    <label for="Title">Title</label>
</div>
<div data-container-for="title" class="k-edit-field">
    <input class="k-textbox" data-bind="value:title" name="Title" type="text" required="required" />
</div>
 <div class="k-edit-label">
        <label for="Start">Start</label>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <input name="start" required="required" style="z-index: inherit;" type="datetime"
            data-bind="value:start,invisible:isAllDay"
            data-format="M/d/yyyy h:mm tt"
            data-role="datetimepicker" />

        <input name="start" required="required" type="date" style="z-index: inherit;"
            data-bind="value:start,visible:isAllDay"
            data-format="M/d/yyyy"
            data-role="datepicker" />

        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        <label for="End">End</label>
    </div>
    <div data-container-for="end" class="k-edit-field">

        <input name="end" required="required" style="z-index: inherit;" type="datetime"
            data-bind="value:end,invisible:isAllDay"
            data-format="M/d/yyyy h:mm tt"
            data-role="datetimepicker" />

        <input name="end" required="required" type="date" style="z-index: inherit;"
            data-bind="value:end,visible:isAllDay"
            data-format="M/d/yyyy"
            data-role="datepicker" />

        <span data-bind="text: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        <label for="IsAllDay">IsAllDay</label>
    </div>
    <div data-container-for="isAllDay" class="k-edit-field">
        <input data-bind="checked:isAllDay" name="IsAllDay" type="checkbox" value="true" />
    </div>

    <div class="k-edit-label">
        <label for="recurrenceRule">Recurrence Rule</label>
    </div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        <div data-bind="value:recurrenceRule" id="recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
    </div>

    <div class="k-edit-label">
        <label for="description">Description</label>
    </div>
    <div data-container-for="description" class="k-edit-field">
        <textarea class="k-textbox" cols="20" data-bind="value:description" data-role="editor" id="description" name="description" rows="2">
        </textarea>
    </div>

    <div class="k-edit-label">
        <label for="RoomID">RoomID</label>
    </div>

    <div data-container-for="roomId" class="k-edit-field">
        <input id="roomId" name="roomId" style="width: 200px" type="text"
            data-bind="value:roomId"
            data-val="true"
            data-val-number="The field RoomID must be a number."
            data-source='[{"text":"Meeting Room 101","value":1},{"text":"Meeting Room 201","value":2}]'
            data-text-field="text"
            data-value-field="value"
            data-value-primitive="true"
            data-option-label="None"
            data-role="dropdownlist" />
    </div>

    <div class="k-edit-label">
        <label for="Attendees">Attendees</label>
    </div>
    <div data-container-for="attendees" class="k-edit-field">
        <select id="attendees" multiple="multiple" name="attendees"
            data-role="multiselect"
            data-bind="value:attendees"
            data-source='[{"text":"Alex","value":1},{"text":"Bob","value":2},{"text":"Charlie","value":3}]'
            data-text-field="text"
            data-value-field="value"
            data-value-primitive="true"
            ></select>
    </div>
    </script>
<demo:footer />