JSFiddle - React, Tailwind, and code Playground

by matbeard

HTML

<script src="http://cdn.kendostatic.com/2013.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<div id="scheduler"></div>
<script id="editor" type="text/x-kendo-template">
<div>
	<div class="k-edit-label">
		<label for="type_id">Absence Type</label>
	</div>
	<div data-container-for="type_id" class="k-edit-field">
        <input name="type_id" data-bind="value:type_id" data-value-field="id" data-text-field="description" data-source="resourceData" data-role="dropdownlist" data-option-label="Type" data-height="300" data-template="resourceTemplate" data-auto-bind="true" data-select="selectResource" required validationMessage="Please select an absence type">
		<span class="k-invalid-msg" data-for="type_id"></span>
	</div>
	<div class="k-edit-label">
		<label for="isAllDay">All day event?</label>
	</div>
	<div data-container-for="isAllDay" class="k-edit-field">
		<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
	</div>
</div>
</script>

JavaScript

$(document).ready(function(){
	
	scheduler = $("#scheduler").kendoScheduler({
		date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
            "day",
            { type: "week", selected: true },
            "month",
            "agenda"
        ],
        timezone: "Etc/UTC",
		dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "meetingID",
                    fields: {
                        meetingID: { from: "MeetingID", 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:...