JSFiddle - React, Tailwind, and code Playground

HTML

<base href="http://demos.telerik.com/kendo-ui/scheduler/api">
  
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.mobile.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>

<body>
    <div id="example">
    <div class="box">
        <div class="box-col">
            <h4>Current Date</h4>
            <input id="date" />
        </div>
        <div class="box-col">
            <h4>Current View</h4>
            <select id="views">
                <option value="agenda">Agenda</option>
                <option value="day">Day</option>
                <option value="month">Month</option>
                <option value="week">Week</option>
            </select>
        </div>
    </div>
    <div id="scheduler"></div>
</div>



</body>
</html>

CSS

html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

JavaScript

$(function() {
    debugger;
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 00:00"),
        height: 400,
        timezone: "Etc/UTC",
        views: [
            "day",
            { type: "month", selected: true },
            "month",
            "agenda"
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "taskID",
                    fields: {
                        taskID: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from:...