forked from extern/egroupware
63 lines
1.5 KiB
HTML
63 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
|
|
<title>Styling task bars with events</title>
|
||
|
|
|
||
|
|
<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
|
||
|
|
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../common/testdata.js"></script>
|
||
|
|
<style>
|
||
|
|
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
|
||
|
|
|
||
|
|
.important{
|
||
|
|
border:2px solid red;
|
||
|
|
color:red;
|
||
|
|
background:red;
|
||
|
|
}
|
||
|
|
|
||
|
|
.important .gantt_task_progress{
|
||
|
|
background: #ff5956;
|
||
|
|
}
|
||
|
|
.normal{
|
||
|
|
border:2px solid green;
|
||
|
|
}
|
||
|
|
.low{
|
||
|
|
border:2px solid yellow;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom_row{
|
||
|
|
background:rgb(245, 248, 245);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body onload="init();">
|
||
|
|
<div id="gantt_here" style='width:1000px; height:400px;'></div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function init() {
|
||
|
|
|
||
|
|
gantt.init("gantt_here");
|
||
|
|
//defines the text inside the tak bars
|
||
|
|
gantt.templates.task_text=function(start,end,task){
|
||
|
|
return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.users;
|
||
|
|
};
|
||
|
|
//defines the style of task bars
|
||
|
|
gantt.templates.grid_row_class = gantt.templates.task_row_class = function(start, end, task){
|
||
|
|
return "custom_row";
|
||
|
|
};
|
||
|
|
|
||
|
|
gantt.templates.task_class=function(start,end,task){
|
||
|
|
if(task.progress > 0.5){
|
||
|
|
return "";
|
||
|
|
}else{
|
||
|
|
return "important";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
gantt.parse(users_data);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|