script

<script src="https://cpwa-polarion-t.muc.mtu.dasa.de/polarion/ria/javascript/highcharts/highcharts-gantt.js"></script>
<script src="https://cpwa-polarion-t.muc.mtu.dasa.de/polarion/ria/javascript/highcharts/modules/draggable-points.js"></script>

<style>
#container, #buttonGroup {
    max-width: 1200px;
    min-width: 320px;
    margin: 1em auto;
}

.hidden {
    display: none;
}

.main-container button {
    font-size: 12px;
    border-radius: 2px;
    border: 0;
    background-color: #ddd;
    padding: 13px 18px;
}

.main-container button[disabled] {
    color: silver;
}

.button-row button {
    display: inline-block;
    margin: 0;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 500ms;
}

.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 300px;
    position: relative;
}

.popup input, .popup select {
    width: 100%;
    margin: 5px 0 15px;
}

.popup button {
    float: right;
    margin-left: 0.2em;
}

.popup .clear {
    height: 50px;
}

.popup input[type=text], .popup select {
    height: 2em;
    font-size: 16px;
}
</style>
        
<div class="demo">
    <div id="container"></div>
    <div id="buttonGroup" class="button-row">
        <button id="btnShowDialog">
            <i class="fa fa-plus"></i>
            Add task
        </button>
        <button id="btnRemoveSelected" disabled="disabled">
            <i class="fa fa-remove"></i>
            Remove selected
        </button>
    </div>

    <div id="addTaskDialog" class="hidden overlay">
        <div class="popup">
            <h3>Add task</h3>

            <label>Task name <input id="inputName" type="text" /></label>

            <label>Test System
                <select id="selectTestSystem">
                    <option value="0">S-TR1</option>
                    <option value="1">S-TR2</option>
                    <option value="2">S-TR6</option>
                    <option value="3">S-TR7</option>
                    <option value="4">S-TR8</option>
                    <option value="5">STTE3</option>
                    <option value="6">STTE4</option>
                </select>
            </label>

            <label>Dependency
                <select id="selectDependency">
                    <!-- Filled in by Javascript -->
                </select>
            </label>

            <label>
                Milestone
                <input id="chkMilestone" type="checkbox" />
            </label>

            <div class="button-row">
                <button id="btnAddTask">Add</button>
                <button id="btnCancelAddTask">Cancel</button>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<script>
/*
    Simple demo showing some interactivity options of Highcharts Gantt. More
    custom behavior can be added using event handlers and API calls. See
    http://api.highcharts.com/gantt.
*/

var today = new Date(),
    day = 1000 * 60 * 60 * 24,
    each = Highcharts.each,
    reduce = Highcharts.reduce,
    btnShowDialog = document.getElementById('btnShowDialog'),
    btnRemoveTask = document.getElementById('btnRemoveSelected'),
    btnAddTask = document.getElementById('btnAddTask'),
    btnCancelAddTask = document.getElementById('btnCancelAddTask'),
    addTaskDialog = document.getElementById('addTaskDialog'),
    inputName = document.getElementById('inputName'),
    selectTestSystem = document.getElementById('selectTestSystem'),
    selectDependency = document.getElementById('selectDependency'),
    chkMilestone = document.getElementById('chkMilestone'),
    isAddingTask = false;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();


// Update disabled status of the remove button, depending on whether or not we
// have any selected points.
function updateRemoveButtonStatus() {
    var chart = this.series.chart;
    // Run in a timeout to allow the select to update
    setTimeout(function () {
        btnRemoveTask.disabled = !chart.getSelectedPoints().length ||
            isAddingTask;
    }, 10);
}


// Create the chart
var chart = Highcharts.ganttChart('container', {

    chart: {
        spacingLeft: 1
    },

    title: {
        text: 'Interactive Gantt Chart'
    },

    subtitle: {
        text: 'Drag and drop points to edit'
    },

    plotOptions: {
        series: {
            animation: false, // Do not animate dependency connectors
            dragDrop: {
                draggableX: true,
                draggableY: false,
                dragPrecisionX: day,
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                style: {
                    cursor: 'default',
                    pointerEvents: 'none'
                }
            },
            allowPointSelect: true,
            point: {
                events: {
                    select: updateRemoveButtonStatus,
                    unselect: updateRemoveButtonStatus,
                    remove: updateRemoveButtonStatus
                }
            }
        }
    },

    yAxis: {
        type: 'category',
                  categories: ['S-TR1', 'S-TR2', 'S-TR6', 'S-TR7', 'S-TR8', 'STTE3', 'STTE4'],
                  min: 0,
                  max: 6,
    },

    xAxis: {
        currentDateIndicator: true
    },

    tooltip: {
        xDateFormat: '%a %b %d, %H:%M'
    },

    series: [{
        name: 'DECMU NG',
        data: [{
                    	start: today - 3 * day,
                        end: today + 3 * day,
                        name: 'SyAT1',
                        y: 0,
                      }, {
                    	start: today + 3 * day,
                        end: today + 6 * day,
                        name: 'SyAT2',
                        y: 0,
                      }, {
                    	start: today + 12 * day,
                        end: today + 20 * day,
                        name: 'SyAT3',
                        y: 0,
                      }, {
                    	start: today + 1 * day,
                        end: today + 3 * day,
                        name: 'HSSL',
                        y: 1,
                      }, {
                    	start: today + 3 * day,
                        end: today + 5 * day,
                        name: 'ETAT',
                        y: 1,
                      }, {
                    	start: today + 6 * day,
                        end: today + 10 * day,
                        name: 'DMSU',
                        y: 1,
                      }, {
                    	start: today + 1 * day,
                        end: today + 3 * day,
                        name: 'Calibration',
                        y: 2,
                      }, {
                    	start: today + 3 * day,
                        end: today + 5 * day,
                        name: 'SAT1',
                        y: 2,
                      }, {
                    	start: today + 6 * day,
                        end: today + 19 * day,
                        name: 'SAT2',
                        y: 2,
                      }, {
                    	start: today + 1 * day,
                        end: today + 3 * day,
                        name: 'SAT3',
                        y: 3,
                      }, {
                    	start: today + 3 * day,
                        end: today + 5 * day,
                        name: 'Calibration',
                        y: 3,
                      }, {
                    	start: today + 6 * day,
                        end: today + 12 * day,
                        name: 'SAT4',
                        y: 3,
                      }, {
                    	start: today + 1 * day,
                        end: today + 3 * day,
                        name: 'SAT5',
                        y: 4,
                      }, {
                    	start: today + 3 * day,
                        end: today + 5 * day,
                        name: 'SAT6',
                        y: 4,
                      }, {
                    	start: today + 6 * day,
                        end: today + 17 * day,
                        name: 'SAT7',
                        y: 4,
                      }, {
                    	start: today + 1 * day,
                        end: today + 3 * day,
                        name: 'SAT8',
                        y: 5,
                      }, {
                    	start: today + 3 * day,
                        end: today + 5 * day,
                        name: 'SAT9',
                        y: 5,
                      }, {
                    	start: today + 6 * day,
                        end: today + 15 * day,
                        name: 'SAT10',
                        y: 5,
                      }, {
                    	start: today + 0 * day,
                        end: today + 4 * day,
                        name: 'SAT11',
                        y: 6,
                      }, {
                    	start: today + 4 * day,
                        end: today + 9 * day,
                        name: 'SAT12',
                        y: 6,
                      }, {
                    	start: today + 9 * day,
                        end: today + 13 * day,
                        name: 'SAT13',
                        y: 6,
        }]
    }]
});


/* Add button handlers for add/remove tasks */

btnRemoveTask.onclick = function () {
    var points = chart.getSelectedPoints();
    each(points, function (point) {
        point.remove();
    });
};

btnShowDialog.onclick = function () {
    // Update dependency list
    var depInnerHTML = '<option value=""></option>';
    each(chart.series[0].points, function (point) {
        depInnerHTML += '<option value="' + point.id + '">' + point.name +
            ' </option>';
    });
    selectDependency.innerHTML = depInnerHTML;

    // Show dialog by removing "hidden" class
    addTaskDialog.className = 'overlay';
    isAddingTask = true;

    // Focus name field
    inputName.value = '';
    inputName.focus();
};

btnAddTask.onclick = function () {
    // Get values from dialog
    var series = chart.series[0],
        name = inputName.value,
        undef,
        dependency = chart.get(
            selectDependency.options[selectDependency.selectedIndex].value
        ),
        y = parseInt(
            selectTestSystem.options[selectTestSystem.selectedIndex].value,
            10
        ),
        maxEnd = reduce(series.points, function (acc, point) {
            return point.y === y && point.end ? Math.max(acc, point.end) : acc;
        }, 0),
        milestone = chkMilestone.checked || undef;

    // Empty category
    if (maxEnd === 0) {
        maxEnd = today;
    }

    // Add the point
    series.addPoint({
        start: maxEnd + (milestone ? day : 0),
        end: milestone ? undef : maxEnd + day,
        y: y,
        name: name,
        dependency: dependency ? dependency.id : undef,
        milestone: milestone
    });

    // Hide dialog
    addTaskDialog.className += ' hidden';
    isAddingTask = false;
};

btnCancelAddTask.onclick = function () {
    // Hide dialog
    addTaskDialog.className += ' hidden';
    isAddingTask = false;
};
</script>