JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=1030"></script>
Update: <input type="button" id="update" value="Update"/>
<div class="container">
    <div id="dps"></div>
    <div id="dpc"></div>
</div>
<div id="log">
    
</div>

CSS

.container{
    height:200px;
}

JavaScript

$(function(){
    dps = new DayPilot.Scheduler("dps");
    dps.resources = [];
    for(var i = 0 ; i < 100 ; i++){
        dps.resources.push({name:"Viktor"+i, id:"Viktor"+i});
    }
    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(1349128800000), //"2012-10-02T00:00:00"
        end:new DayPilot.Date(1351810800000), //"2012-11-02T01:00:00"
        id: 0, 
        text: "Type boat1"
    })
    
    dps.startDate = new DayPilot.Date("2012-10-05T00:00:00").getDatePart();
    
    dps.heightSpec = "Fixed";//Parent100Pct
    dps.height=300
    dps.cellWidthSpec = 'Auto';
    dps.rowHeaderWidthAutoFit = false;
    dps.init();  
    $("#update").click(function(){
        dps.update();
    })
})