jQuery.Gantt example

Testing out jQuery.Gantt examples

by azcoov

HTML

<script src="https://raw.github.com/taitems/jQuery.Gantt/master/js/jquery.fn.gantt.min.js"></script>
<!doctype html>

<head>
        <title>jQuery.Gantt</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
    </head>
    <body>

        <div class="gantt"></div>
    <body>

CSS

.gantt, .gantt2 {
    width: 100%;
    margin: 20px auto;
    border: 14px solid #ddd;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.gantt:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.fn-gantt {
    width: 100%;
}

.fn-gantt .fn-content {
    overflow: hidden;
    position: relative;
    width: 100%;
}




/* === LEFT PANEL === */

.fn-gantt .leftPanel {
    float: left;
    width: 225px;
    overflow: hidden;
    border-right: 1px solid #DDD;
    position: relative;
    z-index: 20;
}

.fn-gantt .row {
    float: left;
    height: 24px;
    line-height: 24px;
    margin-left: -24px;
}

.fn-gantt .leftPanel .fn-label {
    display: inline-block;
    margin: 0 0 0 5px;
    color: #484A4D;
    width: 110px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size:.7em
}

.fn-gantt .leftPanel .row0 {
    border-top: 1px solid #DDD;
}
.fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
    float: left;
    height: 23px;
    margin: 0;
    border-bottom: 1px solid #DDD;
    background-color: #f6f6f6;
}

.fn-gantt .leftPanel .name {
    width: 110px;
    font-weight: bold;
}

.fn-gantt .leftPanel .desc {
    width: 115px;
}

.fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
    width: 225px;
}

.fn-gantt .spacer {
    margin: -2px 0 1px 0;
    border-bottom: none;
    background-color: #f6f6f6;
}




/* === RIGHT PANEL === */

.fn-gantt .rightPanel {
    overflow: hidden;
}

.fn-gantt .dataPanel {
    margin-left: 0px;
    border-right: 1px solid #DDD;
    background-image: url(../img/grid.png);
    background-repeat: repeat;
    background-position: 24px 24px;
}
.fn-gantt .day, .fn-gantt .date {
    overflow: visible;
    width: 24px;
    line-height: 24px;
    text-align:...

JavaScript

$(function() {

    "use strict";

    $(".gantt").gantt({
        source: [{
            name: "Replication Clean Up - Phase 2",
            desc: "Replication - New File for Multi Values",
            values: [{
                from: "/Date(1320192000000)/",
                to: "/Date(1322401600000)/",
                label: "62067",
                customClass: "ganttRed"}]},
        {
            name: " ",
            desc: "Canceled Accounts Comparsion",
            values: [{
                from: "/Date(1322611200000)/",
                to: "/Date(1323302400000)/",
                label: "62069",
                customClass: "ganttRed"}]},
        {
            name: "",
            desc: "Document Replication Flow Chart",
            values: [{
                from: "/Date(1323802400000)/",
                to: "/Date(1325685200000)/",
                label: "62057",
                customClass: "ganttGreen"}]},
        {
            name: " ",
            desc: "Replication Sum Up Account Codes & Delinquencies",
            values: [{
                from: "/Date(1325685200000)/",
                to: "/Date(1325695200000)/",
                label: "62063",
                customClass: "ganttBlue"}]},
        {
            name: "",
            desc: "Rereplicate on OOB for dscontracts",
            values: [{
                from: "/Date(1326785200000)/",
                to: "/Date(1325785200000)/",
                label: "62065",
                customClass: "ganttGreen"}]}],
        navigate: "scroll",
        scale: "weeks",
        maxScale: "months",
        minScale: "days",
        itemsPerPage: 10,
        onItemClick: function(data) {
            alert("Item clicked - show some details");
        },
        onAddClick: function(dt, rowId) {
            alert("Empty space clicked - add an item!");
        },
        onRender: function() {
            if (window.console && typeof console.log === "function") {
                console.log("chart...