Interactive gantt

author(s): Øystein Moseng

by andypotanin

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>

<div class="main-container">
    <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>Department
                <select id="selectDepartment">
                    <option value="0">Tech</option>
                    <option value="1">Marketing</option>
                    <option value="2">Sales</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>

CSS

#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 / 30%);
    transition: opacity 500ms;
    z-index: 1;
}

.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;
}

JavaScript

/*
    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'),
  selectDepartment = document.getElementById('selectDepartment'),
  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();



var chart = Highcharts.ganttChart('container', {
  title: {
    text: 'Event Activities'
  },
  xAxis: {
    max: Date.UTC(2023, 6, 26)
  },
  series: [{
    name: 'Hotel',
    data: [{
        name: 'Transportation from the airport',
        start: Date.UTC(2023, 6, 20, 9),
        end: Date.UTC(2023, 6, 20, 15)
      },
      {
        name: 'Check-in process for arriving guests.',
        start: Date.UTC(2023, 6, 20, 12),
        end: Date.UTC(2023, 6, 20, 17)
      }
    ]
  }, {
    name: 'Court',
    data: [{
      name: 'Courts are open for play.',
      start: Date.UTC(2023, 6, 20, 13),
      end: Date.UTC(2023, 6, 20, 21)
    }, {
      name: 'Courts are open for practice.',
      start: Date.UTC(2023, 6, 21, 8),
      end: Date.UTC(2023, 6, 21, 21)
    }, {
      name: 'Breakfast by the courts.',
      start: Date.UTC(2023, 6, 22, 7),
      end: Date.UTC(2023, 6, 22, 9)
    }, {
      name: 'Matches Start',
      start: Date.UTC(2023, 6, 22,...