egroupware_official/phpgwapi/js/dhtmlxGantt/samples/04_customization/08_templates.html

63 lines
1.5 KiB
HTML
Raw Normal View History

<!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>