JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
Set business hours 00:00-17:00: <input type="checkbox" id="business"/>
<div class="container">
    <div id="dps"></div>
    <div id="dpc"></div>
</div>
<div id="log">
    
</div>

CSS

.container{
    /*height:200px;*/
}

JavaScript

$(function(){
    
    dpc = new DayPilot.Calendar("dpc");
    dpc.startDate = new DayPilot.Date().firstDayOfWeek(1).getDatePart()  // or just dp.startDate = "2013-03-25";
    dpc.days = 1;
    dpc.heightSpec = 'BusinessHoursNoScroll';
    dpc.businessBeginsHour = 8;
	dpc.businessEndsHour = 17;    
    dpc.viewType = "Days";
    dpc.onBeforeCellRender = function(args){
        if(args.cell.start.getHours() >= 10){
         args.cell.backColor = "red";
        }else{
            args.cell.backColor = "white";
        }
    }
    dpc.onTimeRangeSelected = function(args){
        $("#log").html(args.start+"-"+args.end);
    }
    dps = new DayPilot.Scheduler("dps");
    dps.viewType = "Gantt";
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
        {groupBy: 'Hour', format:"HH:mm"}
    ];
    dps.resources = [
        {name:"Viktor", id:"Viktor"}
    ]
    dps.events.list = [];
    var guid = DayPilot.guid();
    var guid2 = DayPilot.guid();
    dps.events.list.push({
        start:new DayPilot.Date().addHours(2), 
        end:(new DayPilot.Date()).addHours(5), 
        id: guid, 
        text: "Type boat",
        type:"boat",
        resource:"Viktor",
        backColor:"lightgrey",
        fontColor:"white"
    })
    dpc.events.list = [];
    dpc.events.list.push(dps.events.list[0])
    dps.heightSpec = "Auto";//Parent100Pct
    dps.cellWidthSpec = 'Auto';
    dps.rowHeaderWidthAutoFit = false;
    dps.showNonBusiness = false;
    dps.businessBeginsHour = dpc.businessBeginsHour;
    dps.businessEndsHour = dpc.businessEndsHour;
    dps.init();
    dpc.init();
    $("#business").click(function(){
        if(this.checked){
            dpc.businessBeginsHour = 0;
	        dpc.businessEndsHour = 17;    
            dps.businessBeginsHour = dpc.businessBeginsHour;
            dps.businessEndsHour = dpc.businessEndsHour;
        }else{
            dpc.businessBeginsHour = 8;
	       ...