extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-08-18 12:30:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

New dhtmlxGantt library, and etemplate2 widget to use it (work in progress)

Browse Source
This commit is contained in:
Nathan Gray
2014-04-16 19:47:29 +00:00
parent 3b68b8bff8
commit c4f56f2c3b
280 changed files with 30260 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
phpgwapi/js/dhtmlxGantt/samples/04_customization/01_outer_content.html Executable file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Define side content</title>
</head>
<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/skins/dhtmlxgantt_meadow.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="../common/testdata.js"></script>
<style type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.templates.rightside_text = function(start, end, task){
return "ID: #" + task.id;
};
gantt.templates.leftside_text = function(start, end, task){
return task.duration + " days";
};
gantt.parse(demo_tasks);
</script>
</body>

61
phpgwapi/js/dhtmlxGantt/samples/04_customization/02_custom_tree.html Executable file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Custom tree formatting</title>
</head>
<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 src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
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>
<body>
<div id="gantt_here" style='width:100%; height:100%'></div>
<script type="text/javascript">
gantt.config.grid_width = 380;
gantt.config.add_column = false;
gantt.templates.grid_row_class = function(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 item.progress*100 + "%";
}
},
{name:"assigned", label:"Assigned to", align: "center", width:100,
template: function(item) {
if (!item.users) return "Nobody";
return item.users.join(", ");
}
}
];
gantt.init("gantt_here");
gantt.parse(users_data);
</script>
</body>

70
phpgwapi/js/dhtmlxGantt/samples/04_customization/03_link_styles.html Executable file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Link styles</title>
</head>
<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 type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
.gantt_task_link.start_to_start .gantt_line_wrapper div{
background-color: #dd5640;
}
.gantt_task_link.start_to_start:hover .gantt_line_wrapper div{
box-shadow: 0 0 5px 0px #dd5640;
}
.gantt_task_link.start_to_start .gantt_link_arrow_right{
border-left-color: #dd5640;
}
.gantt_task_link.finish_to_start .gantt_line_wrapper div{
background-color: #7576ba;
}
.gantt_task_link.finish_to_start:hover .gantt_line_wrapper div{
box-shadow: 0 0 5px 0px #7576ba;
}
.gantt_task_link.finish_to_start .gantt_link_arrow_right{
border-left-color: #7576ba;
}
.gantt_task_link.finish_to_finish .gantt_line_wrapper div{
background-color: #55d822;
}
.gantt_task_link.finish_to_finish:hover .gantt_line_wrapper div{
box-shadow: 0 0 5px 0px #55d822;
}
.gantt_task_link.finish_to_finish .gantt_link_arrow_left{
border-right-color: #55d822;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.templates.link_class = function(link){
var types = gantt.config.links;
switch (link.type){
case types.finish_to_start:
return "finish_to_start";
break;
case types.start_to_start:
return "start_to_start";
break;
case types.finish_to_finish:
return "finish_to_finish";
break;
}
};
gantt.parse(demo_tasks);
</script>
</body>

69
phpgwapi/js/dhtmlxGantt/samples/04_customization/04_task_styles.html Executable file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Task styles</title>
</head>
<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 type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
.high{
border:2px solid #d96c49;
color: #d96c49;
background: #d96c49;
}
.high .gantt_task_progress{
background: #db2536;
}
.medium{
border:2px solid #34c461;
color:#34c461;
background: #34c461;
}
.medium .gantt_task_progress{
background: #23964d;
}
.low{
border:2px solid #6ba8e3;
color:#6ba8e3;
background: #6ba8e3;
}
.low .gantt_task_progress{
background: #547dab;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.config.columns=[
{name:"text", label:"Task name", tree:true, width:"*" },
{name:"start_date", label:"Start time", align: "center" },
{name:"priority", label:"Priority", align: "center", template:function(obj){
if (obj.priority == 1){ return "High"}
if (obj.priority == 2){ return "Medium"}
return "Low"
} }
];
gantt.templates.task_class = function(start, end, task){
switch (task.priority){
case "1":
return "high";
break;
case "2":
return "medium";
break;
case "3":
return "low";
break;
}
};
gantt.parse(users_data);
</script>
</body>

34
phpgwapi/js/dhtmlxGantt/samples/04_customization/05_tree_template.html Executable file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Template for tree nodes</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>
.important{
color:red;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script>
gantt.config.columns=[
{name:"text", label:"Task name", tree:true, width:230, template:myFunc },
{name:"start_date", label:"Start time", align: "center" },
{name:"duration", label:"Duration", align: "center" }
];
gantt.init("gantt_here");
gantt.parse(users_data);
function myFunc(task){
if(task.priority ==1)
return "<div class='important'>"+task.text+" ("+task.users+") </div>";
return task.text+" ("+task.users+")";
};

40
phpgwapi/js/dhtmlxGantt/samples/04_customization/06_highlight_weekend.html Executable file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Highlighting weekends</title>
</head>
<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{
width: 100%;
height: 100%;
margin: 0;
}
.weekend{
background: #f4f7f4;
}
.gantt_selected .weekend{
background: #f7eb91;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%'></div>
<script type="text/javascript">
gantt.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
gantt.templates.task_cell_class = function(item,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend"
}
};
gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
</body>

35
phpgwapi/js/dhtmlxGantt/samples/04_customization/07_progress_text.html Executable file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Text in the Progress bar</title>
</head>
<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>
.gantt_task_progress{
text-align:left;
padding-left:10px;
box-sizing: border-box;
color:white;
font-weight: bold;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.templates.progress_text = function(start, end, task){
return "<span style='text-align:left;'>"+Math.round(task.progress*100)+ "% </span>";
};
gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
</body>

63
phpgwapi/js/dhtmlxGantt/samples/04_customization/08_templates.html Executable file
View File

@@ -0,0 +1,63 @@
<!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>

83
phpgwapi/js/dhtmlxGantt/samples/04_customization/09_html_content.html Executable file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Custom html content</title>
</head>
<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 type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
.custom_progress{
display: inline-block;
vertical-align: top;
text-align: center;
height:100%;
}
.custom_progress.nearly_done{
background-color: #4CC259;
}
.custom_progress.in_progress{
background-color: #88BFF5;
}
.custom_progress.idle{
background-color: #d96c49;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
var tasks = {
data:[
{id:1, text:"Project #2", start_date:"01-04-2013",
progress1:0.3, progress2:0.5, progress3:0.8, duration:18,order:10,open: true},
{id:2, text:"Task #1", start_date:"02-04-2013", duration:8, order:10,
progress1:0.6, progress2:0.1, progress3:0.8, parent:1},
{id:3, text:"Task #2", start_date:"11-04-2013", duration:8, order:20,
progress1:0.9, progress2:0.4, progress3:0.2, parent:1}
],
links:[
{ id:1, source:1, target:2, type:"1"},
{ id:2, source:2, target:3, type:"0"},
{ id:3, source:3, target:4, type:"0"},
{ id:4, source:2, target:5, type:"2"}
]
};
gantt.config.progress = false;
function percenToString(num){
return Math.floor(num*100) + '%';
}
function renderLabel(progress, sum){
var relWidth = progress/sum * 100;
var cssClass = "custom_progress ";
if(progress > 0.6){
cssClass += "nearly_done";
}else if(progress > 0.3){
cssClass += "in_progress";
}else{
cssClass += "idle";
}
return "<div class='"+cssClass+"' style='width:"+relWidth+"%'>" + percenToString(progress) + "</div>";
}
gantt.templates.task_text = function(start, end, task){
var summ = task.progress1 + task.progress2 + task.progress3;
return renderLabel(task.progress1, summ) + renderLabel(task.progress2, summ) + renderLabel(task.progress3, summ);
};
gantt.init("gantt_here");
gantt.parse(tasks);
</script>
</body>

53
phpgwapi/js/dhtmlxGantt/samples/04_customization/10_context_menu.html Executable file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Simple context menu</title>
</head>
<script type="text/javascript" src="../common/dhtmlxMenu/dhtmlxcommon.js"></script>
<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/dhtmlxMenu/dhtmlxmenu.js"></script>
<link rel="stylesheet" href="../common/dhtmlxMenu/skins/dhtmlxmenu_dhx_terrace.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="../common/testdata.js"></script>
<style type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%'></div>
<div id="context"></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.parse(demo_tasks);
var menu = new dhtmlXMenuObject();
menu.setIconsPath("../common/dhtmlxMenu/sample_images/");
menu.renderAsContextMenu();
menu.setSkin("dhx_terrace");
menu.loadXML("../common/dhxmenu.xml?e=" + new Date().getTime());
gantt.attachEvent("onContextMenu", function(taskId, linkId, event){
var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
if(taskId){
menu.showContextMenu(x, y);
}else if(linkId){
menu.showContextMenu(x, y);
}
if(taskId || linkId){
return false;
}
return true;
});
</script>
</body>

47
phpgwapi/js/dhtmlxGantt/samples/04_customization/11_split_task.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Split task</title>
</head>
<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">
<style type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
.complex_gantt_bar{
background: transparent;
border:none;
}
.complex_gantt_bar .gantt_task_progress{
display:none;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.templates.task_class = function(start, end, task){
if (task.splitStart)
return "complex_gantt_bar";
};
gantt.templates.task_text = function(start, end, task){
if (!task.splitStart) return task.text;
var lw = Math.round( task.splitStart * 100 / task.duration );
var rw = Math.round( 100 - task.splitEnd * 100 / task.duration );
var left = "<div class='gantt_task_line' style='left:0px; width:"+lw+"%;'>" + task.text + "</div>";
var right = "<div class='gantt_task_line' style='right:0px; width:"+rw+"%'>" + task.text + "</div>";
return right + left;
};
gantt.parse({
"data":[
{"id":11, "text":"Project #1", "start_date":"01-04-2013", "duration":"11", "progress": 0.6, "open": true},
{"id":1, "text":"Task 1",
start_date:"01-04-2013",
splitStart:4, splitEnd:6,
duration:"10",
"progress": 0.4, "parent":"11"}
]
});
</script>
</body>

110
phpgwapi/js/dhtmlxGantt/samples/04_customization/12_custom_task_type.html Executable file
View File

@@ -0,0 +1,110 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Custom task type</title>
</head>
<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css" type="text/css" title="no title" charset="utf-8">
<script type="text/javascript" src="../common/testdata.js"></script>
<style type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
.meeting_task{
border:2px solid #BFC518;
color:#6ba8e3;
background: #F2F67E;
}
.meeting_task .gantt_task_progress{
background:#D9DF29;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.config.types["meeting"] = "type_id";
gantt.locale.labels["type_meeting"] = "Meeting";
//sections for tasks with 'meeting' type
gantt.locale.labels.section_title = "Subject";
gantt.locale.labels.section_details = "Details";
gantt.config.lightbox["meeting_sections"] = [
{name: "title", height: 20, map_to: "text", type: "textarea", focus: true},
{name: "details", height: 70, map_to: "details", type: "textarea", focus: true},
{name: "type", type: "typeselect", map_to: "type"},
{name: "time", height: 72, type: "time", map_to: "auto"}
];
//sections for regular lightbox
gantt.config.lightbox.sections = [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "type", type: "typeselect", map_to: "type"},
{name: "time", height: 72, type: "duration", map_to: "auto"}
];
gantt.templates.task_class = function(start, end, task){
if(task.type == gantt.config.types.meeting){
return "meeting_task";
}
return "";
};
gantt.templates.task_text = function(start, end, task){
if(task.type == gantt.config.types.meeting){
return "Meeting: <b>" + task.text + "</b>";
}
return task.text;
};
gantt.templates.rightside_text = function(start, end, task){
if(task.type == gantt.config.types.milestone){
return task.text;
}
return "";
};
gantt.init("gantt_here");
var demo_tasks = {
"data":[
{"id":11, "text":"Project #1", type:gantt.config.types.project, "progress": 0.6, "open": true},
{"id":12, "text":"Task #1", "start_date":"03-04-2013", "duration":"5", "parent":"11", "progress": 1, "open": true},
{"id":13, "text":"Task #2", "start_date":"03-04-2013", type:gantt.config.types.project, "parent":"11", "progress": 0.5, "open": true},
{"id":14, "text":"Task #3", "start_date":"02-04-2013", type:gantt.config.types.meeting, "duration":"6", "parent":"11", "progress": 0.8, "open": true},
{"id":15, "text":"Task #4", type:gantt.config.types.project, "parent":"11", "progress": 0.2, "open": true},
{"id":16, "text":"Final milestone", "start_date":"15-04-2013", type:gantt.config.types.milestone, "parent":"11", "progress": 0, "open": true},
{"id":17, "text":"Task #2.1", "start_date":"03-04-2013", "duration":"2", "parent":"13", "progress": 1, "open": true},
{"id":18, "text":"Task #2.2", "start_date":"06-04-2013", "duration":"3", "parent":"13", "progress": 0.8, "open": true},
{"id":19, "text":"Task #2.3", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0.2, "open": true},
{"id":20, "text":"Task #2.4", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0, "open": true},
{"id":21, "text":"Task #4.1", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.5, "open": true},
{"id":22, "text":"Task #4.2", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.1, "open": true},
{"id":23, "text":"Mediate milestone", "start_date":"14-04-2013", type:gantt.config.types.milestone, "parent":"15", "progress": 0, "open": true}
],
"links":[
{"id":"10","source":"11","target":"12","type":"1"},
{"id":"11","source":"11","target":"13","type":"1"},
{"id":"12","source":"11","target":"14","type":"1"},
{"id":"13","source":"11","target":"15","type":"1"},
{"id":"14","source":"23","target":"16","type":"0"},
{"id":"15","source":"13","target":"17","type":"1"},
{"id":"16","source":"17","target":"18","type":"0"},
{"id":"17","source":"18","target":"19","type":"0"},
{"id":"18","source":"19","target":"20","type":"0"},
{"id":"19","source":"15","target":"21","type":"2"},
{"id":"20","source":"15","target":"22","type":"2"},
{"id":"21","source":"15","target":"23","type":"0"}
]
};
gantt.parse(demo_tasks);
</script>
</body>

26
phpgwapi/js/dhtmlxGantt/samples/04_customization/13_autosize_container.html Executable file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Expand container</title>
</head>
<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>
<body>
<style type="text/css">
html, body{
padding:0px;
margin:0px;
}
</style>
<div id="gantt_here"></div>
<script type="text/javascript">
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.autosize = true;
gantt.init("gantt_here");
gantt.load("../common/data.json", "json");
dhtmlx.message("Gantt container is adjusted to the size of the content");
</script>
</body>

142
phpgwapi/js/dhtmlxGantt/samples/04_customization/index.html Executable file
View File

@@ -0,0 +1,142 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../common/docs.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale = 1.0" />
<title>Gantt : Samples</title></title>
</head>
<body>
<div class='abstop_header'>
<div class='content_area'>
&nbsp;
</div>
</div>
<div class="page_header">
<div class='page_inner_header'>
<a href='http://dhtmlx.com'><div class='top_webix_logo'></div></a>
Samples
</div>
</div>
<div class="page_space">
<div class="webixdoc_page webixdoc_start">
<div id="webixContent" class='webixdoc_content'>
<div class="webixdoc_content_inner">
<div class="webixdoc_breadcrumb nav_breadcrumb">
<a href="http://docs.dhtmlx.com/gantt/" class="webixdoc_back">Documentation</a>
<a href="../index.html" class="webixdoc_back">Samples</a>
<a href='../index.html' class='webixdoc_back'>04 Customization</a>
</div>
<table class='nav_table'>
<tr>
<td style='width:30px;'>
<a href='../index.html'><div class='nav_back_img'>&nbsp;</div></a>
</td><td> <a href='../index.html'>Back</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='01_outer_content.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='01_outer_content.html'>Define side content</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='02_custom_tree.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='02_custom_tree.html'>Custom tree formatting</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='03_link_styles.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='03_link_styles.html'>Link styles</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='04_task_styles.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='04_task_styles.html'>Task styles</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='05_tree_template.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='05_tree_template.html'>Template for tree nodes</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='06_highlight_weekend.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='06_highlight_weekend.html'>Highlighting weekends</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='07_progress_text.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='07_progress_text.html'>Text in the Progress bar</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='08_templates.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='08_templates.html'>Styling task bars with events</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='09_html_content.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='09_html_content.html'>Custom html content</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='10_context_menu.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='10_context_menu.html'>Simple context menu</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='11_split_task.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='11_split_task.html'>Split task</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='12_custom_task_type.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='12_custom_task_type.html'>Custom task type</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='13_autosize_container.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='13_autosize_container.html'>Expand container</a> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--Side quick links -->
<div class="side_links">
<a class="reference_link" href="http://docs.dhtmlx.com/gantt/api__refs__gantt.html">
<span>API Reference</span>
</a>
<a class="sample_link" href="../index.html">
<span>Code Samples</span>
</a>
<a class="forum_link" href="http://forum.dhtmlx.com/viewforum.php?f=15">
<span>Developer Forum </span>
</a>
</div>
</div>
</div>
<div class="footer_linea">&nbsp;</div>
<div class="footer_lineb">
<div class='page_inner_header'>
<a href='http://dhtmlx.com'><div class='bottom_webix_block bottom_webix_logo' ></div></a>
<div class='copyright bottom_webix_block'>© 2014 Dinamenta, UAB<br>
All rights reserved</div>
<div class='bottom_webix_also'>
<h4>Check also:</h4>
<li><a href='http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml' target='_blank'>DHTMLX Scheduler</a></li>
<li><a href='http://dhtmlx.com/docs/products/dhtmlxSuite/index.shtml' target='_blank'>Other DHTMLX components</a></li>
</div>
</div>
</div>
</body>
</html>