JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<input type="button" id="switch" value="Days/Resources"/>
<div class="container">
    <div id="dpcalendar"/>
</div>

CSS

/* calendar white */

.calendar_white_main  
{
	border: 1px solid #999;
}

.calendar_white_colheader
{
}

.calendar_white_scroll_up {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAB3RJTUUH2wESDiYcrhwCiQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAARnQU1BAACxjwv8YQUAAACcSURBVHjaY2AgF9wWsTW6yGMlhi7OhC7AyMDQzMnBXIpFHAFuCtuaMTP+P8nA8P/b1x//FfW/HHuF1UQmxv+NUP1c3OxMVVhNvCVi683E8H8LXOY/w9+fTH81tF8fv4NiIpBRj+YoZtZ/LDUoJmKYhsVUpv0MDiyMDP96sIYV0FS2/8z9ICaLlOhvS4b/jC//MzC8xBG0vJeF7GQBlK0xdiUzCtsAAAAASUVORK5CYII=);
}

.calendar_white_scroll_down {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAACqSURBVChTY7wpam3L9J+xmQEP+PGPKZZxP4MDi4zI78uMDIwa2NT+Z2DYovrmiC+TI8OBP/8ZmEqwGvif4e8vxr+FIDkmEKH25vBWBgbG0+iK/zEwLtF+ffwOXCGI8Y+BoRFFIdC030x/WmBiYBNhpgLdswNJ8RSYaSgmgk39z1gPUfj/29ef/9rwhQTDHRHbrbdEbLvRFcGthkkAra/9/uMvhkK8piNLAgCRpTnNn4AEmAAAAABJRU5ErkJggg==);
}

.calendar_white_rowheader_inner, 
.calendar_white_cornerright_inner,
.calendar_white_corner_inner,
.calendar_white_colheader_inner,
.calendar_white_alldayheader_inner 
{
	color: #666;
	background: #eee;
	background: -moz-linear-gradient(
		top,
		#eee 0%,
		#ddd);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#eee),
		to(#ddd));
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#eeeeee", endColorStr="#dddddd");
	
}

.calendar_white_cornerright_inner 
{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	border-bottom: 1px solid #999;
}

.calendar_white_rowheader_inner 
{
	font-size: 16pt;
	text-align: right; 
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	
}

.calendar_white_corner_inner 
{
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	border-right: 1px solid #999;
	border-bottom: 1px solid...

JavaScript

$(function(){
    var dpc = $('#dpcalendar').daypilotCalendar({
        cssClassPrefix: "calendar_white",
        startDate: "2015-01-06",  
        dayBeginsHour: 10,
        dayEndsHour: 18,
        cellDuration: 15,
        timeHeaderCellDuration: 15,
        cellHeight: 25,
        heightSpec: "Fixed",
        height: 600,
        columnWidthSpec: "Fixed",
        columnWidth: 100,
        hourWidth: 65,
        eventClickHandling:"Select",
       // timeRangeSelectedHandling: "Hold",
        //timeRangeSelectedHandling: "JavaScript",
        //timeRangeSelectedJavaScript:"invokeMenu(start)"
        columns: [  // note: if start is not specified, dpc.startDate will be used
            { name: "AAA", id: "1", start: "2015-01-06" },  
            { name: "BBB", id: "2" },
            { name: "CCC", id: "3" },
            { name: "DDD", id: "4" },
            { name: "EEE", id: "5" }
        ],
        viewType: "Resources",
        events: [{  start: "2015-01-06T13:00:00",
                    end: "2015-01-06T13:30:00",
                    id: "1",
                    text: "Event 1",
                    resource:"1",
                    backColor:"#80FFFF"  },
        { start: "2015-01-06T13:00:00",
          end: "2015-01-06T13:15:00",
          id: "3",
          text: "Event 2",
          resource:"3"  }]
    });
    
    dpc.contextMenuSelection = new DayPilot.Menu([
        {text: "New appointment", onclick: function (args) { 
            var start = this.source.start;
            var end = this.source.end;
            var resource = this.source.resource;
            var e = new DayPilot.Event({start: start, end: end, resource: resource, id: DayPilot.guid(), text: "New event"});
            dpc.events.add(e);
            dpc.clearSelection();
         } 
    }]);

    
    $("#switch").click(function(){
        if(dpc.viewType == "Days") {
            dpc.viewType = "Resources";
        } else {
            dpc.days = 8;
            dpc.viewType = "Days";...