JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<input type="checkbox" id="gantt"/> Gantt
<div class="container">
    <div id="dps"/>
</div>

JavaScript

$(function(){
    var dps = new DayPilot.Scheduler("dps");
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
        {groupBy: 'Hour', format:"HH:mm"}
    ];
    dps.resources = [
        {name:"Viktor",
         id:"Viktor"}
    ]
    setTimeout(function(){
        dps.events.add(new DayPilot.Event({
            start:new DayPilot.Date(), 
            end:(new DayPilot.Date()).addHours(5), 
            value: DayPilot.guid(), 
            text: "New Event", 
            resource:'Viktor'
        }))
         dps.events.add(new DayPilot.Event({
            start:new DayPilot.Date(), 
            end:(new DayPilot.Date()).addHours(5), 
            value: DayPilot.guid(), 
            text: "I am a very long text that will make resource column very wide", 
            resource:'Viktor'
        }))
    },2000);
    dps.onIncludeTimeCell = function(args){
        if(args.cell.start.getHours() < dps.businessBeginsHour || 
           ((args.cell.start.getHours()==0?24:args.cell.start.getHours()) >= dps.businessEndsHour/* && args.cell.end.getMinutes() == 0*/)){
            args.cell.visible = false;
        }
    }
    dps.heightSpec = "Auto";//Parent100Pct
    dps.cellDuration = 30;
    dps.businessBeginsHour = 10;
    dps.businessEndsHour = 24;
    dps.init();
    $("#gantt").click(function(){
        if(dps.viewType == "Gantt"){
            dps.viewType = "Resources";
        }else{
             dps.viewType = "Gantt";   
        }
        dps.rowHeaderWidth = 20;
        dps.update();
    })
})