JSFiddle - React, Tailwind, and code Playground

by lamarant

HTML

<script src="http://401web.com/dhtmlgantt/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="http://401web.com/dhtmlgantt/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
		

<div id="gantt_here" style='width:100%; height:100%;'></div>

CSS

html, body{
			margin:0px;
			padding:0px;
			height:100%;
			overflow:hidden;
		}

JavaScript

var demo_tasks = {
	data:[
		{"id":1, "text":"Office itinerancy", "type":gantt.config.types.project, "order":"10", progress: 0.4, open: false},

		{"id":2, "text":"Office facing", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"8", "order":"10", progress: 0.6, open: true},
	]
};
        
        var assOpts = [{"key":null,"label":"Unassigned"},{"key":2479,"label":"dcqzebp ojdpt0"},{"key":1267,"label":"Demo Test"},{"key":95,"label":"Justin Miklas"},{"key":1595,"label":"Marybeth Onyeukwu"},{"key":212,"label":"MaryEllen Venzke"},{"key":25,"label":"Pingdom Account"},{"key":89,"label":"Product Demonstration"},{"key":24,"label":"Product Demonstration"},{"key":23,"label":"RS3 Demo"},{"key":13,"label":"Test User"},{"key":22,"label":"Travis Bechthold - VW"}];
	    var statOpts = [{"key":3,"label":"Ahead of Schedule"},{"key":2,"label":"Behind Schedule"},{"key":4,"label":"Cancelled"},{"key":5,"label":"Completed"},{"key":7,"label":"N/A"},{"key":6,"label":"Not Started"},{"key":1,"label":"On Track"}];

        
        gantt.config.lightbox.sections = [
            { name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
            { name: "status", height: 22, map_to: "statusID", type: "select", options: statOpts },
            { name: "assigned", height: 22, map_to: "assignedToID", type: "select", options: assOpts },
            { name: "time", height: 22, map_to: "auto", type: "time" }
        ];
gantt.config.buttons_right = ["dhx_delete_btn"];   

        gantt.locale.labels.section_description = "Title";
        gantt.locale.labels.section_status = "Status";
        gantt.locale.labels.section_assigned = "Assigned to";
		gantt.init("gantt_here");
		gantt.parse(demo_tasks);