JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<button id="addRes">Add Resources</button>
<div class="container">
    <div id="dps"/>
</div>

JavaScript

$(function(){
    var dps = new DayPilot.Scheduler("dps");
    dps.timeHeaders = [{ "groupBy": "Day", "format": "M/d/yyyy", "": "" }, { "groupBy": "Hour", "format": "h tt" }];
    dps.crosshairType = "Header";
    dps.treeEnabled = true;
    dps.cssOnly = true;
    dps.timeFormat = "Clock12Hours";
    dps.viewType = "Resources";
    dps.useEventBoxes = 'Always';
    dps.eventResizeHandling = "Enabled";
    dps.eventMoveHandling = "Enabled";
    dps.layout = "DivBased";
    dps.heightSpec = "Max";
    dps.cellDuration = 30;
    dps.doubleClickTimeout = 300;
    dps.timeHeaders = [{ "groupBy": "Day", "format": "M/d/yyyy", "": "" }, { "groupBy": "Hour", "format": "h tt" }];
    dps.eventResizeMargin = 5;
    dps.Days = 1;
    dps.businessBeginsHour = 7;
    dps.businessEndsHour = 20;
    dps.showNonBusiness = false;
    dps.rowMinHeight = 38;
    dps.cellWidthSpec = 'Auto';
    dps.init();
    $("#addRes").click(function(){
        var resArray = [{name:"Test Resource", id:"TR1"},
                        {name:"Test Res 123njgbjgbjhmbjhbsbsb", id:"TR2"}];
        dps.resources = resArray;            
        dps.update();
    })
})