JSFiddle - React, Tailwind, and code Playground

by Logan Halverson

HTML

<link rel="stylesheet" href="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css">
<script src="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js"></script>
<div id="gantt_here" style="width: 100%; height: 200px;">
    </div>

JavaScript

var realDemoData = {
    "data": [
        { "id": 1, "text": "Project", "type": "task", "open": true, "start_date": "01-04-2013 07:30:45", "duration": "197", "progress": 0.6, "parent": 0 },
        { "id": 2, "text": "task1", "type": "task", "start_date": "01-04-2013 07:30:50", "category": "Auto", "task_thread": 0, "duration": "100", "sD": 0.1, "parent": "1", "open": true, "complexity": "", "resource": "System Automation", "skill": ["Automation"], "location": "Auto", "awarenessTime": 0, "executionTime": 0.1, "communicationTime": 0, "billetTimes": [], "started": false, "variance": 0, "assignedBillet": 0, "busyUntil": 0 }
        
        

    ]
};


gantt.config.fit_tasks = true;
gantt.config.xml_date = "%d-%m-%Y %H:%i:%s";

gantt.config.duration_unit = "minute";
gantt.config.duration_step = (1 / 60); //new


////////////////////////////////////////////////////////////////////////
//            Columns displayed on left side of screen                //
////////////////////////////////////////////////////////////////////////
gantt.config.scale_height = 60;
gantt.config.scale_unit = "hour";
gantt.config.round_dnd_dates = false;
gantt.config.date_scale = " %g %a";
gantt.config.subscales = [
    { unit: "minute", step: 1, date: "%g:%i %a" }
];

///////////////////////////////////////////////////
/*gantt.config.scale_height = 60;
         gantt.config.scale_unit = "month";
         gantt.config.round_dnd_dates = false;
         gantt.config.date_scale = " %M";
         gantt.config.subscales = [{ unit: "year", step: 1, date: "%Y" }];*/
////////////////////////////////////////////
gantt.init("gantt_here");
gantt.parse(realDemoData);