jQuery addClass example

Change class name on click in jQuery

by esantiagovieira

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/gantt/modules/draggable-points.js"></script>
<div id="dragstatus"></div>
<div class="main-container">
    <div id="gant_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...

CSS

#gant_container,
#buttonGroup {
    max-width: 1500px;
    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;
}

JavaScript

function pad(n) {
    return n < 10 ? '0' + n : n;
}
var setStatus = function(st) {
    $('#dragstatus').html(st).show();
}

// get MID Weekly GANTT (simulate actual form data)
var s = 'btn_mid_016'.split("_");
var sel_t = "07/22/2019 - 07/28/2019".split(' - '),
    day = moment(sel_t[1]).add(1, 'week').format('MM/DD/YYYY'),
    sel_s = sel_t[0].split('/'),
    sel_e = day.split('/'),
    snap = (1000 * 60 * 60 * 24) / 48,
    initial = {},
    final = [],
    prod = false;
Highcharts.ganttChart('gant_container', {
    time: {
        timezone: 'America/New_York'
    },
    chart: {
        events: {
            load: function() {
                var chart = this;
                chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label) {
                    //alert(label.innerHTML);
                    if (label.innerHTML.charAt(7) === 'S') {
                        label.style.fill = 'red';
                        label.style['font-weight'] = 900;

                    }
                })
            }
        }
    },
    exporting: {
        chartOptions: {
            //chart: {
              //  width: 1700,
                //height: 1050
            //},
            style: {
                fontSize: '10px'
            }
        },
        scale: 6,
        csv: {
            decimalPoint: '.',
            dateFormat: '%Y-%m-%d %H:%M %p'
        },
        buttons: {
            contextButton: {
                menuItems: [
                    'viewFullscreen',
                    'separator',
                    'printChart',
                    'downloadPNG',
                    //'downloadJPEG',
                    'downloadPDF',
                    //'downloadSVG',
                    'downloadCSV'
                    //'downloadJSON'
                ]
            }
        }
    },
    title: {
        text: 'Gantt Chart with Progress Indicators for MID: ' + s[2]
    },
    time: {
        timezone: 'America/New_York'
    },

    xAxis: {
 ...