Home/ Questions/Q 8711785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T04:58:09+00:00

I am using the jQuery plugin from this site http://mbielanczuk.com/2011/06/jquery-gantt-chart/ . I was able

  • 0

I am using the jQuery plugin from this site http://mbielanczuk.com/2011/06/jquery-gantt-chart/.

I was able to implement it except I am having problems with the width and height. Example: http://www.txtease.com/android/push/login/schedule/mbielan/index.htm

From the link, you can see the chart does not fill up the screen. Are you familiar with using jQuery.Gantt and know what element to target to adjust the width and height?

  1. I have set the ‘itemsperpage’ parameter to 17.

  2. From what I have investigated, it looks like the width of the chart is based on the height. That number is divided for paginating.

  3. I put a width and height style around the chart in css. Only the height adjusted to 800px. The width remains the same

Gantt

</script–>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript">

jQuery(function () {
var dataPath = location.href.substring(0, location.href.lastIndexOf('/')+1);
$(".gantt2").gantt({source: dataPath + "js/dataHours.js", navigate: 'scroll', scale: 'hours', maxScale: 'hours', minScale: 'hours', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]});
//$(".gantt").gantt({source: dataPath + "js/dataDays.js", navigate: 'scroll', scale: 'days', maxScale: 'weeks', minScale: 'days', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]});
//$(".gantt").gantt({
// source: [{"name":"application","desc":"Lübeck","values":[{"from":"/Date(1293874598708)/","to":"/Date(1354268198708)/","desc":"ID: 10<br/>name: CRM<br/>date: 01.01.2011 to 30.11.2012<br/>description: CRM 4.0", "label":"CRM","customClass":"ganttGreen"}]}],
// navigate: 'scroll', scale: 'days', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]});

});

    </script>
</head>
<body>

 <div class="gantt2" style="width: 800px,height: 800px"></div>
</body>

Any help is appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is a default style.css that comes with the plugin. I’ve altered this and it works

    .gantt {
    width: 800px;
    height: 800px;
    margin: 20px auto;
    border: 15px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;  
}
    • 0