JSFiddle - React, Tailwind, and code Playground

by krustev

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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css">
<div class="scheduler"></div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.k-event {
    min-height: 3.3em;
}

.k-scheduler-header-all-day td {
    height: 2.9em;
}

JavaScript

var data = [];
var today = new Date();

for (var i = 0; i < 2; ++i) {
    var item = {
        title: 'Event ' + i, 
        start: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
        end: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
        description: 'Event description ' + i,
        isAllDay: true
    };
    
    data.push(item);
}

var template = '<div class="k-event-template">' +
                 '<div class="title">ss#: title #</div>' +
                 '<div class="description">#: description #</div>' +
               '</div>';

$(function() {
   var s = $('.scheduler').kendoScheduler({
       views: ['day', 'week', 'month'],
       allDayEventTemplate: template,
       dataSource: new kendo.data.SchedulerDataSource({ 
           data: data
       })
    }).data('kendoScheduler');
});