JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<script src="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css">
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
<script src="http://docs.dhtmlx.com/gantt/samples/common/testdata.js"></script>
<link rel="stylesheet" href="https://rawgit.com/samsonkhisty/ff9b7ca52a9232eb8d1a/raw/61e7c6a4fc58a8dcee52304fee513bf86de92349/dhtmlxgantt_enllighten_override.css">
<button style="height: 34px;line-height: 30px;margin:3px auto" onclick="updateCriticalPath(this)">Show Critical Path</button>

<br>
<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.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(users_data);

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) {
    switch (value) {
        case "1":
            gantt.config.scale_unit = "day";
            gantt.config.step = 1;
            gantt.config.date_scale = "%d %M";
            gantt.config.subscales = [];
            gantt.config.scale_height = 27;
  ...