JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.container{
    height:200px;
    display:none;
}

JavaScript

$(function(){
    dps = new DayPilot.Scheduler("dps");
    dps.resources = [];
    dps.viewType = "Gantt";
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
		{groupBy: 'Hour', format:"HH"}
    ];
    dps.rowHeaderWidth = 64;
    dps.rowHeaderColumns = [
        { title: 'Name', width: 64 }
    ]
    dps.events.list = [];
    dps.events.list.push({
        start:new DayPilot.Date().addHours(2), 
        end:(new DayPilot.Date()).addHours(5), 
        id: "123", 
        text: "Types dfsdfsdf gdgddgdgd fgdfgd gdgklasdj",
        type:"boat"
    })
    dps.startDate = new DayPilot.Date();
    dps.days = 1;    
    dps.heightSpec = "Parent100Pct";//Parent100Pct
    dps.cellWidthSpec = 'Auto';
    dps.rowHeaderWidthAutoFit = false;
    dps.onRowHeaderColumnResized = function(args) {
        console.log(args.column);
        $("#log").html(args.column.title + ":" + args.column.width);
    };
    dps.init();  
    $("input").click(function(){
        $(".container").show();  
    })
})