JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=932"></script>
<input type="checkbox" id="gantt"/> Gantt
<input type="button" id="reloadevents" value="Reload events"/> 
<div class="container">
    <div id="dps"/>
</div>
<div id="log">
    
</div>

CSS

.container{
    height:200px;
}

JavaScript

function addEvents(){
    /*while(dps.events.list.length > 0){
         dps.events.remove(dps.events.find(dps.events.list[0].id));
    }
    
    for(var i = 0 ; i < dps.resources.length ; i++){
        dps.events.add(new DayPilot.Event({
            start:new DayPilot.Date().addHours(2), 
            end:(new DayPilot.Date()).addHours(5), 
            value: DayPilot.guid(), 
            text: "New Event", 
            resource:dps.resources[i].id
        }))
    }*/
    dps.events.list = [];
    for(var i = 0 ; i < dps.resources.length ; i++){
        dps.events.list.push(new DayPilot.Event({
            start:new DayPilot.Date().addHours(2), 
            end:(new DayPilot.Date()).addHours(5), 
            value: DayPilot.guid(), 
            text: "New Event", 
            resource:dps.resources[i].id
        }))
    }
    dps.update();
    
}
$(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"},
        {name:"Viktor1", id:"Viktor1"},
        {name:"Viktor2", id:"Viktor2"},
        {name:"Viktor3", id:"Viktor3"},
        {name:"Viktor4", id:"Viktor4"},
        {name:"Viktor5", id:"Viktor5"},
        {name:"Viktor6", id:"Viktor6"},
        {name:"Viktor7", id:"Viktor7"},
        {name:"Viktor8", id:"Viktor8"},
        {name:"Viktor9", id:"Viktor9"},
        {name:"Viktor10", id:"Viktor10"},
        {name:"Viktor11", id:"Viktor11"},
        {name:"Viktor12", id:"Viktor12"},
        {name:"Viktor13", id:"Viktor13"},
        {name:"Viktor14", id:"Viktor14"},
        {name:"Viktor15", id:"Viktor15"},
        {name:"Viktor16", id:"Viktor16"},
    ]
    setTimeout(function(){
        addEvents();
    },1000);
    dps.onIncludeTimeCell = function(args){
        if(args.cell.start.getHours() < dps.businessBeginsHour || 
          ...