JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<script src="https://rawgit.com/samsonkhisty/6287e1e587f6278eda30/raw/756506e58935a6159c3a788ae2c3b2a89c465671/dhtmlxgantt.js"></script>
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
<script src="https://rawgit.com/samsonkhisty/dcfa438b3ec00eead9ce/raw/9a46548659e0f5a59c516da0c108c437565ec1eb/critical_data.js"></script>
<script src="https://rawgit.com/samsonkhisty/a198375f78b7c90810e6/raw/82e026fe489d411db6c76c6fdd8e8b429aa9ff59/test_data.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/beenlightened.com/gantt_export_css/dhtmlxgantt_enllighten_override.css">
<button name="cp" id="cp" style="height: 34px;line-height: 30px;margin:3px auto" data-enabled = "true" >Show Critical Path</button>

<button name="exp" id="exp" style="height: 34px;line-height: 30px;margin:3px auto">Expand All </button>

<button name="coll" id="coll" style="height: 34px;line-height: 30px;margin:3px auto">Collapse All </button>


<input type="radio" id="scale1" name="scale" value="1" checked />
<label for="scale1">Day scale</label>
<input type="radio" id="scale2" name="scale" value="2" />
<label for="scale2">Week scale</label>
<input type="radio" id="scale3" name="scale" value="3" />
<label for="scale3">Month scale</label>
<input type="radio" id="scale4" name="scale" value="4" />
<label for="scale4">Year scale</label>
<div id="gantt_here" style='width:100%; height:100%;'></div>

CSS

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

JavaScript

gantt.init("gantt_here");
gantt.config.fit_tasks = true
gantt.config.start_on_monday = true
gantt.config.show_task_cells = false;
      
gantt.config.columns = [{
    name: "text",
    label: "Task name",
    tree: true,
    width: "*"
}, {
    name: "start_date",
    label: "Start time",
    align: "center"
}, {
    name: "priority",
    label: "Priority",
    align: "center",
    template: function (obj) {
        if (obj.priority == 1) {
            return "High"
        }
        if (obj.priority == 2) {
            return "Medium"
        }
        return "Low"
    }
}];
gantt.templates.task_class = function (start, end, task) {
    switch (task.priority) {
        case "1":
            return "high";
            break;
        case "2":
            return "medium";
            break;
        case "3":
            return "low";
            break;
    }
};

setScaleConfig('1');


<!--  not include duration in weekdays -->
gantt.config.work_time = true;
gantt.ignore_time = function (date) {
    if (date.getDay() === 0 || date.getDay() === 6) {
        return true;
    }
};

gantt.parse(demo_tasks_full);

window.exportGantt = function (mode) {
    if (mode == "png") gantt.exportToPNG({
        header: '<link rel="stylesheet" href="https://rawgit.com/samsonkhisty/ff9b7ca52a9232eb8d1a/raw/cc5fc9b64a3ec9afa740f067f0de713458fb511f/dhtmlxgantt_enllighten_override.css" type="text/css">',
        start: "01-04-2014",
        end: "01-04-2015"
    });
    else if (mode == "pdf") gantt.exportToPDF({
        header: '<link rel="stylesheet" href="https://rawgit.com/samsonkhisty/ff9b7ca52a9232eb8d1a/raw/cc5fc9b64a3ec9afa740f067f0de713458fb511f/dhtmlxgantt_enllighten_override.css" type="text/css">',
        start: "01-04-2014",
        end: "01-04-2015"
    });
}


function setScaleConfig(value) {
      var monthScaleTemplate, weekScaleTemplate;
      switch (value) {
        case "1":
          gantt.config.scale_unit = "day";
          gantt.config.step = 1;
         ...