JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.3.0-rc-30.79/jquery.layout.min.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=1214"></script>
<div class="outer-center">
    <div class="middle-center middle">Inner Center</div>
    <div class="middle-south middle">
        <div id="dps"></div>
    </div>
</div>
<div class="outer-east">
    <div class="middle-center middle">Inner Center</div>
    <div class="middle-south middle">Inner South</div>
</div>

CSS

.ui-layout-pane {
    border:     0; /* cosmetic */
    padding:    0;
    overflow:   hidden;
}
.middle {
    border: 1px solid #C0C0C0;
box-shadow: inset 0 1px 2px #e4e4e4;
}
.middle-center {
    margin-bottom: 4px;
}
/*
* customize borders on panes/resizers to make pretty
*/
.ui-layout-resizer {
  background: #F0F0F0;
}
.ui-layout-resizer-south {
  height: 6px !important;
}
.ui-layout-toggler-south {
  height: 6px !important;
}

.ui-layout-resizer-east {
  width: 6px !important;
}
.ui-layout-toggler-east {
  width: 6px !important;
}

/*
* show both borders when the resizer is 'dragging'
*/
.ui-layout-resizer-west-dragging ,
.ui-layout-resizer-east-dragging {
  border-left:    1px solid #BBB;
  border-right:   1px solid #BBB;
}
.ui-layout-resizer-north-dragging ,
.ui-layout-resizer-south-dragging {
  border-top:   1px solid #BBB;
  border-bottom:  1px solid #BBB;
}

JavaScript

// OUTER-LAYOUT
  $('body').layout({
    center__paneSelector: ".outer-center",
    east__paneSelector:   ".outer-east",
    // MIDDLE-LAYOUT (child of outer-center-pane)
    center__childOptions: {
      center__paneSelector: ".middle-center",
      south__paneSelector:  ".middle-south",
      south__size:      200
    },
    east__childOptions: {
      center__paneSelector:  ".middle-center",
      south__paneSelector: ".middle-south"
    }
  });

dps = new DayPilot.Scheduler("dps");
    dps.viewType = "Resources";
    dps.allowMultiSelect = true;
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
        {groupBy: 'Hour', format:"HH:mm"}
    ];
    dps.events.list = [];
    dps.events.list.push({
        start:new DayPilot.Date().getDatePart().addHours(8), //"2012-10-02T00:00:00"
        end:new DayPilot.Date().getDatePart().addHours(8).addMinutes(60), //"2012-11-02T01:00:00"
        id: "3", 
        text: "Type boat1",
        resource:"123"
    })
    dps.events.list.push({
        start:new DayPilot.Date().getDatePart().addHours(8).addMinutes(60), //"2012-10-02T00:00:00"
        end:new DayPilot.Date().getDatePart().addHours(8).addMinutes(60).addMinutes(60), //"2012-11-02T01:00:00"
        id: "5", 
        text: "Type boat1",
        resource:"123"
    })
    dps.events.list.push({
        start:new DayPilot.Date().getDatePart().addHours(10).addMinutes(15), //"2012-10-02T00:00:00"
        end:new DayPilot.Date().getDatePart().addHours(10).addMinutes(60), //"2012-11-02T01:00:00"
        id: "4", 
        text: "Type boat1",
        resource:"abc"
    })
    dps.groupConcurrentEvents = true;
    dps.groupConcurrentEventsLimit = 1;
    dps.resources = [
        {
            id:"abc123",
            name:"Viktor"
        },
        {
            id:"abc1",
            name:"Sann7a"
        },
        {
            id:"abc2",
            name:"Sann6a"
        },
        {
           ...