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="ApptBookContentPartialView"/>
</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 dps = $('#ApptBookContentPartialView').daypilotCalendar({
    cssClassPrefix: "calendar_white",
    startDate: "2015-01-06",
    dayBeginsHour: 7,
    dayEndsHour: 18,
    cellDuration: 15,
    timeHeaderCellDuration: 15,
    cellHeight: 25,
    //durationBarVisible: true,
    //businessBeginsHour: 7,
    //businessEndsHour: 18,
    //heightSpec: "Parent100Pct",
    eventHoverHandling: "Bubble",
    heightSpec: "Fixed",
    height: 700,
    hourWidth: 65,
    moveBy: "Full",
    //scrollbar: false,
    //showNonBusiness: true,
    //businessHoursNoScroll: true,
    //days: 8,
    columns: [
        { name: "AAA", id: "1" },
        { name: "BBB", id: "9" },
        { name: "CCC", id: "3" }
    ],
        events: [
        {
          start: "2015-01-06T13:00:00",
          end: "2015-01-06T13:30:00",
          id: "1",
          resource: "1",
          text: "Event",
            //bubbleHtml: "Event Bubble"            
        }
      ],
    viewType: "Resources",
        
    bubble: new DayPilot.Bubble(),
    onBeforeEventRender: function(args) {
        args.e.bubbleHtml = "Additional information for: " + args.e.text;
        args.e.html = "New Event";
    }
    });
    
    $("#switch").click(function(){
        if(dps.viewType == "Days"){
            dps.viewType = "Resources";
        }else{
             dps.days = 8;
             dps.viewType = "Days";   
        }
        //dps.rowHeaderWidth = 20;
        dps.update();
    })
})