JSFiddle - React, Tailwind, and code Playground

by Mahmoud Kandeel

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/16.2.3/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/16.2.3/css/dx.light.css">
<script src="https://cdn3.devexpress.com/jslib/16.2.3/js/dx.all.js"></script>
<div id="scheduler"></div>

JavaScript

var data = [
    {
        text: "Website Re-Design Plan",
        ownerId: [4],
        startDate: new Date(2015, 4, 25, 9, 30),
        endDate: new Date(2015, 4, 25, 11, 30)
    }, {
        text: "Book Flights to San Fran for Sales Trip",
        ownerId: [2],
        startDate: new Date(2015, 4, 25, 12, 0),
        endDate: new Date(2015, 4, 25, 13, 0)
    }, {
        text: "Install New Router in Dev Room",
        ownerId: [1],
        startDate: new Date(2015, 4, 25, 14, 30),
        endDate: new Date(2015, 4, 25, 15, 30)
    }, {
        text: "Approve Personal Computer Upgrade Plan",
        ownerId: [3],
        startDate: new Date(2015, 4, 26, 10, 0),
        endDate: new Date(2015, 4, 26, 11, 0)
    }, {
        text: "Final Budget Review",
        ownerId: [1],
        startDate: new Date(2015, 4, 26, 12, 0),
        endDate: new Date(2015, 4, 26, 13, 35)
    }, {
        text: "New Brochures",
        ownerId: [4],
        startDate: new Date(2015, 4, 26, 14, 30),
        endDate: new Date(2015, 4, 26, 15, 45)
    }, {
        text: "Install New Database",
        ownerId: [2],
        startDate: new Date(2015, 4, 27, 9, 45),
        endDate: new Date(2015, 4, 27, 11, 15)
    }, {
        text: "Approve New Online Marketing Strategy",
        ownerId: [3, 4],
        startDate: new Date(2015, 4, 27, 12, 0),
        endDate: new Date(2015, 4, 27, 14, 0)
    }, {
        text: "Upgrade Personal Computers",
        ownerId: [2],
        startDate: new Date(2015, 4, 27, 15, 15),
        endDate: new Date(2015, 4, 27, 16, 30)
    }, {
        text: "Prepare 2015 Marketing Plan",
        ownerId: [1, 3],
        startDate: new Date(2015, 4, 28, 11, 0),
        endDate: new Date(2015, 4, 28, 13, 30)
    }, {
        text: "Brochure Design Review",
        ownerId: [4],
        startDate: new Date(2015, 4, 28, 14, 0),
        endDate: new Date(2015, 4, 28, 15, 30)
    }, {
        text: "Create Icons for Website",
        ownerId: [3],
        startDate:...