JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<div id="scheduler"></div>

<script id="editor" type="text/x-kendo-template">
   <h3>Edit Appointment</h3>
   <p>
       <label>Patient: <input name="title" /></label> 
   </p>
    <p>
        <label>Start: <input data-role="datetimepicker" name="start" /></label>
    </p>
    <p>
        <label>Type: </label>
        <select id="appointmentTypeDropDownList" data-text-field="text" data-value-field="id" data-role="dropdownlist" data-bind="source:dataSource, value:id" data-autobind="true" />
    </p>
</script>

JavaScript

// double-click on a time slot to bring up the editor
// I'm trying to populate the Type field with data, but it won't bind
// sorry for the lousy CSS
var template = kendo.template($("#editor").html());

$("#scheduler").kendoScheduler({
    date: new Date("2014/1/27"),
                startTime: new Date("2014/1/27 07:00 AM"),
                height: 350,
                views: [
                { type: "day", selected: true, allDaySlot: false, minorTickCount: 4},
                { type: "workWeek", allDaySlot: false, minorTickCount: 4 },
                { type: "week", allDaySlot: false, minorTickCount: 4 },
                "month",
                "agenda"
                ],
                workWeekEnd: 6, 
                startTime: new Date("2014/1/27 07:00 AM"),
                endTime: new Date("2014/1/27 18:00"),
                timezone: "Etc/UTC",
                dataSource: [
                {
                    id: 1,
                    start: new Date("2014/1/27 08:00 AM"),
                    end: new Date("2014/1/27 09:00 AM"),
                    title: "Breakfast"
                }
                ],
                //add: onAdd,
                //edit: onEdit,
                editable: {
                    template: template
                },
                footer: false,
                group: {
                    resources: ["Rooms"]
                },
                resources: [
                    {
                        field: "roomId",
                        name: "Rooms",
                        dataSource: [
                            { text: "Exam Room 1", value: 1, color: "blue" },
                            { text: "Exam Room 2", value: 2, color: "red" }
        ],
                        title: "Room"
                    }
                    ]
            });

var viewModel = new kendo.observable({
    dataSource : new kendo.data.DataSource({
    data: [{
        id: 1,
        text: "Wellness Exam"
    }, {
        id:...