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

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

View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>D'n'D Events</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;}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.attachEvent("onAfterTaskDrag", function(id, mode){
var task = gantt.getTask(id);
if(mode == gantt.config.drag_mode.progress){
var pr = Math.floor(task.progress * 100 * 10)/10;
dhtmlx.message(task.text + " is now " + pr + "% completed!");
}else{
var convert = gantt.date.date_to_str("%H:%i, %F %j");
var s = convert(task.start_date);
var e = convert(task.end_date);
dhtmlx.message(task.text + " starts at " + s + " and ends at " + e);
}
});
gantt.attachEvent("onBeforeTaskChanged", function(id, mode, old_event){
var task = gantt.getTask(id);
if(mode == gantt.config.drag_mode.progress){
if(task.progress < old_event.progress){
dhtmlx.message(task.text + " progress can't be undone!");
return false;
}
}
return true;
});
gantt.attachEvent("onBeforeTaskDrag", function(id, mode){
var task = gantt.getTask(id);
var message = task.text + " ";
if(mode == gantt.config.drag_mode.progress){
message += "progress is being updated";
}else{
message += "is being ";
if(mode == gantt.config.drag_mode.move)
message += "moved";
else if(mode == gantt.config.drag_mode.resize)
message += "resized";
}
dhtmlx.message(message);
return true;
});
gantt.parse(demo_tasks);
</script>
</body>

View File

@ -0,0 +1,96 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Constraints</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;}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.templates.task_class = function(st,end,item){
return gantt.getChildren(item.id).length ? "gantt_project" : "";
};
gantt.init("gantt_here");
function limitMoveLeft(task, limit){
var dur = task.end_date - task.start_date;
task.end_date = new Date(limit.end_date);
task.start_date = new Date(+task.end_date - dur);
}
function limitMoveRight(task, limit){
var dur = task.end_date - task.start_date;
task.start_date = new Date(limit.start_date);
task.end_date = new Date(+task.start_date + dur);
}
function limitResizeLeft(task, limit){
task.end_date = new Date(limit.end_date);
}
function limitResizeRight(task, limit){
task.start_date = new Date(limit.start_date)
}
gantt.attachEvent("onTaskDrag", function(id, mode, task, original, e){
var parent = task.parent ? gantt.getTask(task.parent) : null,
children = gantt.getChildren(id),
modes = gantt.config.drag_mode;
var limitLeft = null,
limitRight = null;
if(!(mode == modes.move || mode == modes.resize)) return;
if(mode == modes.move){
limitLeft = limitMoveLeft;
limitRight = limitMoveRight;
}else if(mode == modes.resize){
limitLeft = limitResizeLeft;
limitRight = limitResizeRight;
}
//check parents constraints
if(parent && +parent.end_date < +task.end_date){
limitLeft(task, parent);
}
if(parent && +parent.start_date > +task.start_date){
limitRight(task, parent);
}
//check children constraints
for(var i=0; i < children.length; i++){
var child = gantt.getTask(children[i]);
if(+task.end_date < +child.end_date){
limitLeft(task, child);
}else if(+task.start_date > +child.start_date){
limitRight(task, child)
}
}
});
gantt.parse({
"data":[
{"id":11, "text":"Project #1", "start_date":"01-04-2013", "duration":"11", "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":"02-04-2013", "duration":"7", "parent":"11", "progress": 0.5, "open": true},
{"id":14, "text":"Task #3", "start_date":"02-04-2013", "duration":"6", "parent":"11", "progress": 0.8, "open": true},
{"id":15, "text":"Task #4", "start_date":"02-04-2013", "duration":"6", "parent":"11", "progress": 0.2, "open": true},
{"id":16, "text":"Task #5", "start_date":"02-04-2013", "duration":"7", "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":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":"Task #4.3", "start_date":"03-04-2013", "duration":"5", "parent":"15", "progress": 0, "open": true}
]
});
</script>
</body>

View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Validation</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;}
.busy{
background: #ff5956 !important;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.parse(users_data);
gantt.attachEvent("onBeforeAdd", function(id, item){
var tasks = gantt.getTaskByTime(date1, date2);
for(var i=0;i<tasks.length; i++){
if (item.users == tasks[i].users){
gantt.templates.task_cell_class = function(item1,date){
if (date == date1){
return "busy";
}
};
gantt.refreshData();
alert("One of days is already occupied");
return false;
}
}
return true;
});
</script>
</body>

View File

@ -0,0 +1,131 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Fixed project dates</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_line.gantt_dependent_task {
background-color: #65c16f;
border: 1px solid #3c9445;
}
.gantt_task_line.gantt_dependent_task .gantt_task_progress {
background-color: #46ad51;
}
</style>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
var tasks = {
data:[
{id:4, text:"Project #1", start_date:"02-04-2013", duration:0,order:10,
progress:0.4, open: true},
{id:5, text:"Task #2.1", start_date:"02-04-2013", duration:8, order:10,
progress:0.6, parent:4},
{id:6, text:"Task #2.2", start_date:"11-04-2013", duration:8, order:20,
progress:0.6, parent:4},
{id:7, text:"Project #2", end_date:"19-04-2013", duration:0,order:10,
progress:0.4, open: true},
{id:8, text:"Task #3.1", start_date:"02-04-2013", duration:8, order:10,
progress:0.6, parent:7},
{id:9, text:"Task #3.2", start_date:"11-04-2013", duration:8, order:20,
progress:0.6, parent:7}
],
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.templates.task_text = function(start, end, task){
var text = [task.text];
if(task.$no_end && !task.$no_start){
text.push("Must start on " + gantt.templates.task_date(start));
}else if(task.$no_start && !task.$no_end){
text.push("Must end by " + gantt.templates.task_date(end));
}
return text.join(", ");
};
gantt.config.lightbox.sections = [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "time", height: 72, type: "duration", map_to: "auto"}
];
gantt.init("gantt_here");
gantt.parse(tasks);
function limitMoveLeft(task, limit){
var dur = task.end_date - task.start_date;
task.end_date = new Date(limit.end_date);
task.start_date = new Date(+task.end_date - dur);
}
function limitMoveRight(task, limit){
var dur = task.end_date - task.start_date;
task.start_date = new Date(limit.start_date);
task.end_date = new Date(+task.start_date + dur);
}
function limitResizeLeft(task, limit){
task.end_date = new Date(limit.end_date);
}
function limitResizeRight(task, limit){
task.start_date = new Date(limit.start_date)
}
gantt.attachEvent("onTaskDrag", function(id, mode, task, original, e){
var parent = task.parent ? gantt.getTask(task.parent) : null,
children = gantt.getChildren(id),
modes = gantt.config.drag_mode;
var limitLeft = null,
limitRight = null;
if(!(mode == modes.move || mode == modes.resize)) return;
if(mode == modes.move){
limitLeft = limitMoveLeft;
limitRight = limitMoveRight;
}else if(mode == modes.resize){
limitLeft = limitResizeLeft;
limitRight = limitResizeRight;
}
//check parents constraints
if(parent && +parent.end_date < +task.end_date){
limitLeft(task, parent);
}
if(parent && +parent.start_date > +task.start_date){
limitRight(task, parent);
}
//check children constraints
for(var i=0; i < children.length; i++){
var child = gantt.getTask(children[i]);
if(+task.end_date < +child.end_date){
limitLeft(task, child);
}else if(+task.start_date > +child.start_date){
limitRight(task, child)
}
}
});
</script>
</body>

View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Denying dragging tasks out of specific dates</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;}
.left_limit{
border-right:2px solid #ff2424;
}
.right_limit{
border-left:2px solid #ff2424;
}
</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", duration:10,order:10,
progress:0.4, open: true},
{id:2, text:"Task #1", start_date:"02-04-2013", duration:4, order:10,
progress:0.6, parent:1},
{id:3, text:"Task #2", start_date:"07-04-2013", duration:4, order:20,
progress:0.6, 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"}
]
};
var leftLimit = new Date(2013, 2 ,31),
rightLimit = new Date(2013, 3 ,12);
gantt.templates.task_cell_class = function(item, date){
if(+date == +(gantt.date.add(leftLimit, -1, "day")) )
return "left_limit";
if(+date == +rightLimit)
return "right_limit";
return "";
};
gantt.init("gantt_here", new Date(2013, 2 ,30), new Date(2013, 3 ,15));
gantt.attachEvent("onTaskDrag", function(id, mode, task, original, e){
var modes = gantt.config.drag_mode;
if(mode == modes.move || mode == modes.resize){
if(+task.end_date > +rightLimit){
task.end_date = new Date(rightLimit);
if(mode == modes.move)
task.start_date = new Date(task.end_date - original.duration*(1000*60*60*24));
}
if(+task.start_date < +leftLimit){
task.start_date = new Date(leftLimit);
if(mode == modes.move)
task.end_date = new Date(+task.start_date + original.duration*(1000*60*60*24));
}
}
return true;
});
gantt.parse(tasks);
</script>
</body>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Export data from Gantt</title>
</head>
<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<script src="http://export.webix.io/gantt" 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;}
</style>
<body>
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()' style='margin:20px;'>
<input value="Export to PNG" type="button" onclick='gantt.exportToPNG()'>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
</body>

View File

@ -0,0 +1,107 @@
<!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'>08 Api</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_dnd_events.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='01_dnd_events.html'>D'n'D Events</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='02_constraints.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='02_constraints.html'>Constraints</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='03_validation.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='03_validation.html'>Validation</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='04_limit_project.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='04_limit_project.html'>Fixed project dates</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='05_limit_drag_dates.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='05_limit_drag_dates.html'>Denying dragging tasks out of specific dates</a> </td>
</tr>
<tr>
<td style='width:30px;'>
<a href='06_export.html'><div class='nav_page_img'>&nbsp;</div></a>
</td><td> <a href='06_export.html'>Export data from Gantt</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>