JSFiddle - React, Tailwind, and code Playground

by Anderson Lopez

HTML

<script src="http://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="http://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.css">
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_agenda_view.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_all_timed.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_collision.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_container_autoresize.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_cookie.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_editors.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_expand.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_grid_view.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_html_templates.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_limit.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_minical.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_multiselect.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_multisource.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_mvc.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_outerdrag.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_pdf.js"></script>
<script src="http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_quick_info.js"></script>
<script...

CSS

.dhx_cal_event_line {
    font-size: 10px;
    line-height: 12px;
    color: white;
    border: 1px solid #CCCCCC;
    padding-top: 3px;
    padding-left: 2px;
    /* Changing this causes the task to finish short visibly */
    padding-bottom: 2px;
}

JavaScript

scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.xml_date = "%Y-%m-%d %H:%i";

scheduler.createTimelineView({
    name: "timeline",
    x_unit: "minute", //measuring unit of the X-Axis.
    x_date: "%H:%i", //date format of the X-Axis
    x_step: 30, //X-Axis step in 'x_unit's
    x_size: 50, //X-Axis length specified as the total number of 'x_step's
    // x_start: 16,     //X-Axis offset in 'x_unit's
    x_length: 48, //number of 'x_step's that will be scrolled at a time
    event_dy: 'full',
    section_autoheight: false,
    y_unit: [],
    y_property: "room_id",
    render: "tree",
    dx: 150, // sets width of resource column    
    dy: 35,
    second_scale: {
        x_unit: "day",
        x_date: "%D, %j %M"
    }
});
scheduler.init('scheduler_here', new Date(), "timeline");

scheduler.ignore_timeline = function (date) {
    //non-working hours
    if (date.getHours() < 8 || date.getHours() > 21) return true;
};

var sections = [{
    key: 'manager',
    label: "Res1"
}, {
    key: 2,
    label: "Res2"
}];

//===============
//Data loading
//===============
scheduler.config.lightbox.sections = [{
    name: "description",
    height: 130,
    map_to: "text",
    type: "textarea",
    focus: true
}, {
    name: "custom",
    height: 23,
    type: "select",
    options: sections,
    map_to: "section_id"
}, {
    name: "time",
    height: 72,
    type: "time",
    map_to: "auto"
}];
scheduler.config.first_hour = 8;
scheduler.config.last_hour = 22;

scheduler.config.details_on_create = true;
scheduler.config.drag_create = false;
scheduler.config.drag_highlight = false;
scheduler.config.multi_day = true;
scheduler.config.positive_closing = true;

scheduler.addSection({
    key: 01,
    label: "ATENDIMENTO",
    children: [{
        key: 0101,
        label: 'Vanderlei'
    }, {
        key: 0102,
        label: 'Andre Castro'
    }, {
        key: 0103,
        label: 'Lucas Solis'
    },...