JSFiddle - React, Tailwind, and code Playground

HTML

<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.metro.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<body>
    <div style="width: 50%; margin-left: auto; margin-right: auto;">
        <div id="scheduler"></div>
         <h3>Drag events from the Grid to the Scheduler:</h3>

        <div id="grid" style="width: 800px"></div>
    </div>
</body>

CSS

#scheduler {
     width: 800px
 }
 body {
     font-family: Verdana;
     font-size: 10pt
 }
 .invalid-slot {
     background: red none repeat scroll 0 0 !important;
     cursor: no-drop;
 }

JavaScript

//Local data
 window.dataS = [{
     taskID: 1,
     ownerId: 1,
     title: "Fast and furious 6",
     image: "../../content/web/scheduler/fast-and-furious.jpg",
     imdb: "http://www.imdb.com/title/tt1905041/",
     start: new Date("2013/6/13 17:00"),
     end: new Date("2013/6/13 18:30")
 }, {
     taskID: 2,
     ownerId: 3,
     title: "The Internship",
     image: "../../content/web/scheduler/the-internship.jpg",
     imdb: "http://www.imdb.com/title/tt2234155/",
     start: new Date("2013/6/13 14:00"),
     end: new Date("2013/6/13 15:30")
 }, {
     taskID: 3,
     ownerId: 2,
     title: "The Perks of Being a Wallflower",
     image: "../../content/web/scheduler/wallflower.jpg",
     imdb: "http://www.imdb.com/title/tt1659337/",
     start: new Date("2013/6/13 16:00"),
     end: new Date("2013/6/13 17:30")
 }, {
     taskID: 4,
     ownerId: 1,
     title: "The Help",
     image: "../../content/web/scheduler/the-help.jpg",
     imdb: "http://www.imdb.com/title/tt1454029/",
     start: new Date("2013/6/13 12:00"),
     end: new Date("2013/6/13 13:30")
 }, {
     taskID: 5,
     ownerId: 2,
     title: "Now You See Me",
     image: "../../content/web/scheduler/now-you-see-me.jpg",
     imdb: "http://www.imdb.com/title/tt1670345/",
     start: new Date("2013/6/13 10:00"),
     end: new Date("2013/6/13 11:30")
 }, {
     taskID: 6,
     ownerId: 1,
     title: "Fast and furious 6",
     image: "../../content/web/scheduler/fast-and-furious.jpg",
     imdb: "http://www.imdb.com/title/tt1905041/",
     start: new Date("2013/6/13 19:00"),
     end: new Date("2013/6/13 20:30")
 }, {
     taskID: 7,
     ownerId: 3,
     title: "The Internship",
     image: "../../content/web/scheduler/the-internship.jpg",
     imdb: "http://www.imdb.com/title/tt2234155/",
     start: new Date("2013/6/13 17:30"),
     end: new Date("2013/6/13 19:00")
 }, {
     taskID: 8,
     ownerId: 1,
     title: "The Perks of Being a Wallflower",
     image:...