JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<script src="http://javascript.daypilot.org/sandbox/js/daypilot-all.min.js?v=1029"></script>
<div class="container">
    <div id="dps"></div>
    <div id="dpc"></div>
</div>
<div id="log">
    
</div>

CSS

.container{
    height:200px;
}
#log{
    margin-top:200px
}

JavaScript

$(function(){
    var showWeekends = false;
    dps = new DayPilot.Scheduler("dps");
    dps.resources = [];
    for(var i = 0 ; i < 5 ; i++){
        dps.resources.push({name:"Viktor"+i, id:"Viktor"+i});
    }
    dps.timeHeaders = [ 
        {groupBy: 'Month', format: 'MMMM yyyy'}, 
        {groupBy: 'Week'},
        {groupBy: 'Day'},
        {groupBy: 'Hour', format:"HH:mm"}
    ];
    $("#log").append("<div>"+new Date(1426842000000)+"</div>")
    $("#log").append("<div>"+new Date(1426845600000)+"</div>")
    dps.events.list = [{
        start:new DayPilot.Date(1426842000000),
        end:new DayPilot.Date(1426845600000),
        id:"123",
        text:"test",
        resource:"Viktor2"
    },
    {
        start:new DayPilot.Date(new Date(1426842000000), true),
        end:new DayPilot.Date(new Date(1426845600000), true),
        id:"123",
        text:"test",
        resource:"Viktor2"
    },{
        start:new DayPilot.Date(new Date(1426842000000), false),
        end:new DayPilot.Date(new Date(1426845600000), false),
        id:"123",
        text:"test",
        resource:"Viktor2"
    }];
    dps.onBeforeTimeHeaderRender = function(args){
						if(args.header.level == 0){
							args.header.html = "<a href='javascript:void(0)' onclick=\"blaPlugins.getPlugin('daypilot-scheduler').zoom('month', '"+args.header.start.firstDayOfMonth()+"',true)\">"+"asd"+", "+args.header.start.getYear()+"</a>";
						}else if(args.header.level == 1){
							args.header.html = "<a href='javascript:void(0)' onclick=\"blaPlugins.getPlugin('daypilot-scheduler').zoom('week', '"+args.header.end.firstDayOfWeek(1)+"',true)\">"+args.header.html+"</a>";
						}else if(args.header.level == 2){
							args.header.html = "<a href='javascript:void(0)' onclick=\"blaPlugins.getPlugin('daypilot-scheduler').zoom('day', '"+args.header.start.getDatePart()+"',true)\">"+"asd2"+", "+args.header.start.getDay()+"</a>";
						}
					}
    
    dps.onIncludeTimeCell = function(args) {
						if...