JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<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",
    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: "Event1",
            //bubbleHtml: "Event Bubble"            
        },
        {
          start: "2015-01-06T15:00:00",
          end: "2015-01-06T15:30:00",
          id: 2,
          resource: "9",
          text: "Event2",
            //bubbleHtml: "Event Bubble"            
        }
      ],
    viewType: "Resources"
    });
    
   // dps.contextMenu = new DayPilot.Menu([
//{ text: "Event Context menu item1", onclick: function () { //alert("appointment value: " + this.source.value()); } },
//{ text: "Event Context menu item2", onclick: function () { //alert("appointment text: " + this.source.text()); } },
//{ text: "Event Context menu item3", onclick: function () { //alert("appointment start: " + this.source.start().toStringSortable()); //} }
//]);

//dps.contextMenuSelection = new DayPilot.Menu([
           // { text: "Cell Context menu item1", onclick: function () {           //alert("appointment value: " + this.source.value()); } },
   // { text: "Cell Context menu item2", onclick: function () {   //alert("appointment text: " + this.source.text()); } },
  //  { text: "Cell Context menu item3", onclick: function () { //alert("appointment start: " +...