Hi,
I just started to test gantt. I use below code for testing. But could not show horizontal scroolbar on the bottom of the page. Because of this I could not scrool gantt diagram from begining to the end?
Maybe I am new in HTML. I don’t know?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Gantt Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forced touch mode</title>
<script src="codebase/dhtmlxgantt.js?v=8.0.9"></script>
<!--<link rel="stylesheet" href="codebase/dhtmlxgantt.css?v=8.0.9">-->
<link rel="stylesheet" href="codebase/skins/dhtmlxgantt_meadow.css?v=8.0.9">
<!--<script src="../common/testdata.js?v=8.0.9"></script>-->
<style>
.weekend{ background: rgba(183,142,185,0.3) !important;}
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.red .gantt_cell, .odd.red .gantt_cell,
.red .gantt_task_cell, .odd.red .gantt_task_cell {
background-color: #FDE0E0;
}
.green .gantt_cell, .odd.green .gantt_cell,
.green .gantt_task_cell, .odd.green .gantt_task_cell {
background-color: #BEE4BE;
}
</style>
<script>
// index.html dokükamanı yüklendiğinde ilgili fonksiyon devreye girerek
// proje veri içeriğini ekrana basacak
document.addEventListener("DOMContentLoaded", function(event) {
// standart zaman formatını belirtiyoruz
gantt.config.xml_date = "%Y-%m-%d %H:%i";
//gantt.config.fit_tasks = true;
gantt.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
};
/*
gantt.config.work_time = true;
gantt.templates.scale_cell_class = function(date){
if(!gantt.isWorkTime(date)){
return "weekend";
}
};
gantt.templates.timeline_cell_class = function(task,date){
if(!gantt.isWorkTime({task:task, date:date})){
return "weekend" ;
}
};
*/
gantt.templates.rightside_text = function (start, end, task) {
return "ID: #" + task.id;
};
gantt.templates.leftside_text = function (start, end, task) {
return task.duration + " Gün";
};
gantt.config.grid_width = 380;
gantt.config.add_column = false;
gantt.templates.grid_row_class = function (start_date, end_date, item) {
if (item.progress == 0) return "red";
if (item.progress >= 1) return "green";
};
gantt.templates.task_row_class = function (start_date, end_date, item) {
if (item.progress == 0) return "red";
if (item.progress >= 1) return "green";
};
gantt.config.columns = [
{name: "text", label: "Task name", tree: true, width: '*'},
{
name: "progress", label: "Progress", width: 80, align: "center",
template: function (item) {
if (item.progress >= 1)
return "Complete";
if (item.progress == 0)
return "Not started";
return Math.round(item.progress * 100) + "%";
}
},
{name: "start_date", align: "center", resize: true},
{name: "duration", align: "center"},
{
name: "assigned", label: "Assigned to", align: "center", width: 100,
template: function (item) {
if (!item.users) return "Nobody";
return item.users.join(", ");
}
},
{name: "add", width: 44}
];
gantt.config.touch = "force";
gantt.init("project_map");
//Haftalık
/*
gantt.config.scales = [
{unit: "week", step: 1, format: "%d/%m"}
];
*/
gantt.config.scales = [
{unit: "month", step: 1, format: "%F, %Y"},
{unit: "day", step: 1, format: "%j, %D"}
];
/*
gantt.config.columns = [
{name: "text", tree: true, width: '*', resize: true},
{name: "start_date", align: "center", resize: true},
{name: "duration", align: "center"},
{name: "add", width: 44}
];
*/
gantt.parse({
data: [
{
id: 1, text: "Project #2", start_date: "2024-08-08", duration: 5, order: 10,
progress: 0.9, open: true
},
{
id: 2, text: "Task #1", start_date: "2024-08-10", duration: 8, order: 10,
progress: 0.6, parent: 1
},
{
id: 3, text: "Task #2", start_date: "2024-08-24", duration: 8, order: 20,
progress: 0.6, parent: 1
}
],
links: [
{id: 1, source: 1, target: 2, type: "1"},
{id: 2, source: 2, target: 3, type: "0"}
]
});
gantt.attachEvent("onAfterTaskUpdate", function () {
//remove_markers();
gantt.render();
console.log("Güncellendi");
});
// veri yükleme işinin üstlenildiği kısım
// tahmin edileceği üzere /api/backlog şeklinde bir REST API çağrısı olacak
// bu kod tarafındaki Controller ile karşılanacak
//gantt.load("/api/backlog");
// veri işleyicisi (bir web api servis adresi gibi düşünülebilir)
//var dp = new gantt.dataProcessor("/api/");
//dp.init(gantt);
// REST tipinden iletişim sağlanacak
//dp.setTransactionMode("REST");
});
</script>
</head>
<body>
<h2>Project Plan</h2>
<div id="project_map" style="width: 100%; height: 100vh;"></div>
</body>
</html>
Regards,
Mucip:)