JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

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

CSS

.container{
    height:200px;
}

JavaScript

$(function(){
    dps = new DayPilot.Scheduler("dps");
    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 = [];
    dps.events.list.push({
        start:new DayPilot.Date().addHours(2), 
        end:(new DayPilot.Date()).addHours(5), 
        value: DayPilot.guid(), 
        text: "New Event", 
        resource:"Viktor"
    })

    dps.heightSpec = "Auto";//Parent100Pct
    dps.cellDuration = 30;
    dps.businessBeginsHour = 10;
    dps.businessEndsHour = 18;
    dps.init();
    
    dpc = new DayPilot.Calendar("dpc");
    dpc.viewType = "Days";
    dpc.days = 7;
    //dpc.heightSpec = 'BusinessHoursNoScroll';
    dpc.height = 200;
    dpc.shadow = 'Fill';
    dpc.events.list = [];
    dpc.events.list.push({
        start:new DayPilot.Date().addHours(2), 
        end:(new DayPilot.Date()).addHours(5), 
        value: DayPilot.guid(), 
        text: "New Event", 
        resource:"Viktor"
    })
    dpc.init();
    $("#businesshoursscroll").click(function(){
        if(this.checked){
             dpc.heightSpec = 'BusinessHoursNoScroll';
        }else{
            dpc.heightSpec = 'BusinessHours';
        }
        dpc.update();
    })
})