JSFiddle - React, Tailwind, and code Playground

by apuchkov

HTML

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

JavaScript

$("#scheduler").kendoScheduler({
    date: new Date(),
    startTime: new Date(),
    height: 600,
    views: [
        'week',
        { type: 'month', selected: true },
        'agenda'
    ],
    timezone: 'Etc/UTC',
    dataSource: {
        batch: false,
        transport: {
            read: {
                url: 'http://apuchkov.apiary.io/scheduler-id',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                type: 'GET'
            }
        },
        schema: {
            model: {
                id: 'id',
                fields: {
                    id: { from: 'id', type: 'string' },
                    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: 'recurrenceId' },
                    recurrenceRule: { from: 'recurrenceRule' },
                    recurrenceException: { from: 'recurrenceException' },
                    isAllDay: { type: 'boolean', from: 'isAllDay' }
                }
            }
        }
    }
});