JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>

<div class="container">
    <div id="dps"/>
</div>
<div id="log">
    
</div>

CSS

.container{
    height:200px;
}

JavaScript

$(function(){
    dps = new DayPilot.Scheduler("dps");
    dps.viewType = "Gantt";
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
        {groupBy: 'Hour', format:"HH:mm"}
    ];
    dps.resources = [
        {name:"Viktor", id:"Viktor"}
    ]
    dps.events.list = [];
    var guid = DayPilot.guid();
    var eventStartDate = new Date(2014,7,13,10,0);
    var eventStopDate = new Date(2014,7,13,12,0);
    dps.events.list.push({
        start:new DayPilot.Date(eventStartDate), 
        end:new DayPilot.Date(eventStopDate), 
        id: guid, 
        text: guid,
        resource:"Viktor",
        bubbleHtml: "<div><b>" + guid + "</b></div><div>Start: " + new DayPilot.Date(eventStartDate)+ "</div><div>End: " + new DayPilot.Date(eventStopDate) + "</div>"
    })
    dps.startDate = "2014-08-13";
    dps.heightSpec = "Auto";//Parent100Pct
    dps.cellWidthSpec = 'Auto';
    dps.rowHeaderWidthAutoFit = false;
    dps.businessBeginsHour = 10;
    dps.businessEndsHour = 18;
    dps.init();
})