...

View Full Version : Javascript Gantt with hours/minutes scale



maka79
10-05-2012, 06:26 PM
Hi everybody, I need a javascript library to display a sequence of time intervals (a type of Gantt) with a granularity of hours/minutes.

I had a look to a couple of jquery plugins, but in either case the minimum granularity was days and it doesn't seem too easy fit them to my needs.

Can anyone help me?

Thank you

jalarie
10-05-2012, 10:17 PM
Perhaps this will give you a usable starting point:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>

<title>Gantt</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en-US" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<meta name="description" content="Gantt" />
<meta name="keywords" content="Gantt" />

<link rel="icon" href="favicon.ico" />
<link rev="made" href="mailto:jalarie@umich.edu" />

<!--
Author: James Alarie
Company: -independent-
Address: 3391 N Genesee Rd
Flint MI 48506
Latitude: 42.9663 Longitude: -83.7769
Telephone: +1-810-736-8259
Fax: -none-
Web Site: http://spruce.flint.umich.edu/~jalarie/
E-Mail: jalarie@umich.edu
Comments: Having said that, I've probably told you more than I know.
-->

<link href="style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
/*]]>*/
</style>

<script type="text/javascript" src="style1.js"></script>
<script type="text/javascript">
/*<![CDATA[*/

function DoJump() {
f1=document.forms[0]; // abbreviation
BD=f1.BaseDate.value;
JD=f1.JumpDays.value;
JH=f1.JumpHours.value;
JM=f1.JumpMinutes.value;
JS=f1.JumpSeconds.value;
CT=f1.JumpCount.value;

if (BD == '') { // no date supplied
Now=new Date();
Now_Y=Now.getYear();
if (Now_Y < 70) { Now_Y=Now_Y*1+2000; }
if (Now_Y < 1000) { Now_Y=Now_Y*1+1900; }
Now_M=Now.getMonth(); // Jan-Dec = 0-11
Now_M1=Now_M*1+1; // ...1-12
Now_D=Now.getDate(); // 1-31
Now_H=Now.getHours();
Now_N=Now.getMinutes();
Now_S=Now.getSeconds();
f1.BaseDate.value=Now_Y+'/'+Now_M+'/'+Now_D+' '+Now_H+':'+Now_N+':'+Now_S;
BD=f1.BaseDate.value;
}
if ((JD == '') || (JD*1 == 0)) {
f1.JumpDays.value=0;
JD=0;
}
if ((JH == '') || (JH*1 == 0)) {
f1.JumpHours.value=0;
JH=0;
}
if ((JM == '') || (JM*1 == 0)) {
f1.JumpMinutes.value=0;
JM=0;
}
if ((JS == '') || (JS*1 == 0)) {
f1.JumpSeconds.value=0;
JS=0;
}
Old=new Date(BD)*1; // milliseconds since 1-1-1970
JD=JD*24*60*60*1000;
JH=JH*60*60*1000;
JM=JM*60*1000;
JS=JS*1000;

Out ='';
Out+=new Date(Old);
for (ix1=0; ix1< CT; ix1++) {
New=Old*1+JD*1+JH*1+JM*1+JS*1;
Out+='<br \/>';
Out+=new Date(New);
Old=New;
}
OutputAreaTarget=document.getElementById('OutputArea');
OutputAreaTarget.innerHTML=Out;

return true;
} // DoJump

/*]]>*/
</script>

</head>

<body class="body1">
<div id="body">
<!-- Page Header -->
<div id="header">
<h1>Gantt</h1>
<hr />
</div>

<!-- Content -->
<div id="content">
<br />
<noscript>
<p class="notice">
You must have scripting enabled to make full use of this page.
</p>
</noscript>

<script type="text/javascript">
/*<![CDATA[*/

if (!document.getElementById) {
Out ='';
Out+='<p class="notice">\n';
Out+=' Your browser does not support the &quot;document.getElementById&quot; ';
Out+=' function.&nbsp; Sorry.\n';
Out+='<\/p>\n';
document.write(Out);
}

/*]]>*/
</script>

<div class="center">
<form method="post" action="javascript:void(0);">
<div class="form">
<label for="BaseDate">Base: </label>
<input type="text" size="20" value="" name="BaseDate" id="BaseDate" alt="Base date and time" onfocus="this.select();" />
<br />
&nbsp;&nbsp;as YYYY/MM/DD HH:MM:SS
<br />
<label for="JumpDays">Jump Days: </label>
<input type="text" size="20" value="1" name="JumpDays" id="JumpDays" alt="Jump by days" onfocus="this.select();" />
<br />
<label for="JumpHours">Jump Hours: </label>
<input type="text" size="20" value="0" name="JumpHours" id="JumpHours" alt="Jump by hours" onfocus="this.select();" />
<br />
<label for="JumpMinutes">Jump Minutes: </label>
<input type="text" size="20" value="0" name="JumpMinutes" id="JumpMinutes" alt="Jump by minutes" onfocus="this.select();" />
<br />
<label for"JumpSeconds">Jump Seconds: </label>
<input type="text" size="20" value="0" name="JumpSeconds" id="JumpSeconds" alt=Jump by seconds" onFocus="this.select();" />
<br />
<label for="JumpCount">Count: </label>
<input type="text" sixe="20" value="10" name="JumpCount" id="JumpCount" alt="Items wanted" onfocus="this.select();" />
<br />
<input type="button" value="Ready" title="Submit" onclick="DoJump();" />&nbsp;
<input type="reset" value="Reset" title="Reset" />&nbsp;
</div><!-- form -->
</form>

<br />
<div id="OutputArea">&nbsp;</div>

</div><!-- center -->

</div>

<!-- Page Footer -->
<div id="footer">
<br clear="all" /><hr />
Written on October 5, 2012, by:&nbsp;
<a href="mailto:jalarie@umich.edu">James Alarie</a>.
</div>

</div>
</body>

</html>

Old Pedant
10-06-2012, 01:29 AM
WOW!

Do you actually think you can *FIND* a browser, today, that will make use of this code:


if (!document.getElementById) {
Out ='';
Out+='<p class="notice">\n';
Out+=' Your browser does not support the &quot;document.getElementById&quot; ';
Out+=' function.&nbsp; Sorry.\n';
Out+='<\/p>\n';
document.write(Out);
}

That's a real question. I don't know that I could find one (except in some "antiquities archive"). I know of a text only browser, but it doesn't support JavaScript so the lack of document.getElementById is a moot point.


????

Old Pedant
10-06-2012, 01:34 AM
Anyway, I don't think that's going to be particularly helpful for him. Yes, it creates a text list of times at nearly any interval you want. But given that he is looking a jQuery plugins, I suspect he would have no idea at all how to match that up with his chart.

I think he needs to show us what his Gantt chart looks like, first, before we can help him create the kind of interval markers he wants.

AndrewGSW
10-06-2012, 02:49 AM
Just curious.. to create a Gantt chart with JS (assuming we don't use a canvas) I would probably use a table with different background colours or images, and the occasional absolute-positioned images to sit atop.

I see some Gantt charts with arrows; I suppose these could be a handful of precisely measured images - so that they meet the cells at the correct points(?). Or, better/simpler, don't use arrows! KISS

jalarie
10-06-2012, 05:02 AM
WOW! Do you actually think you can *FIND* a browser, today, that will make use of this code: ... That's a real question. I don't know that I could find one (except in some "antiquities archive").

I try to always test what I write before posting it. I wrote it and originally tested only in Opera, but, based on your question, I've now gone back to test Internet Explorer, Firefox, and Safari. It works in all of them. What browser do you have that can't handle it?

jalarie
10-06-2012, 05:05 AM
Anyway, I don't think that's going to be particularly helpful for him. Yes, it creates a text list of times at nearly any interval you want. But given that he is looking a jQuery plugins, I suspect he would have no idea at all how to match that up with his chart.
I answered his base question. If he wants more, he can always ask.

I think he needs to show us what his Gantt chart looks like, first, before we can help him create the kind of interval markers he wants.
That's true. Every question should be specific about what is needed so that we can give excellent responses.

Philip M
10-06-2012, 11:50 AM
I try to always test what I write before posting it. I wrote it and originally tested only in Opera, but, based on your question, I've now gone back to test Internet Explorer, Firefox, and Safari. It works in all of them. What browser do you have that can't handle it?

He did not say that the browser could not handle it. His point is that the code is totally redundant as there is no modern browser that does not support document.getElementById(). That suggests that the code is rather old. I would have thought that a professor seeking to give "excellent responses" would know that"

vwphillips
10-06-2012, 02:00 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:absolute;overflow:hidden;left:100px;top:100px;width:800px;height:200px;border:solid red 1px;background-Color:red;
}

.timebar {
position:absolute;left:0px;top:0px;height:50px;background-Color:#FFFFCC;
}

.minute {
position:absolute;left:0px;top:0px;width:1px;height:20px;background-Color:red;
}

.hour {
position:absolute;left:0px;top:0px;width:1px;height:40px;background-Color:blue;
}

.hour DIV {
position:absolute;left:0px;top:30px;width:20px;font-Size:12px;
}

.task1 {
position:absolute;left:0px;top:60px;height:40px;background-Color:#FFCC66;
}

.task2 {
position:absolute;left:0px;top:120px;height:40px;background-Color:#FFCC66;
}


.title {
position:absolute;left:10px;top:10px;font-Size:12px;
}

/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Hour 0" onmouseup="zxcDayGantt.Hour('tst',0);"/>
<input type="button" name="" value="Hour 2" onmouseup="zxcDayGantt.Hour('tst',2);"/>
<input type="button" name="" value="Hour 4" onmouseup="zxcDayGantt.Hour('tst',4);"/>
<input type="button" name="" value="Hour 6" onmouseup="zxcDayGantt.Hour('tst',6);"/>
<input type="button" name="" value="Hour 8" onmouseup="zxcDayGantt.Hour('tst',8);"/>
<input type="button" name="" value="Hour 10" onmouseup="zxcDayGantt.Hour('tst',10);"/>
<input type="button" name="" value="Hour 12" onmouseup="zxcDayGantt.Hour('tst',12);"/>
<input type="button" name="" value="Hour 14" onmouseup="zxcDayGantt.Hour('tst',14);"/>
<input type="button" name="" value="Hour 16" onmouseup="zxcDayGantt.Hour('tst',16);"/>
<input type="button" name="" value="Hour 18" onmouseup="zxcDayGantt.Hour('tst',18);"/>

<div id="tst" ></div>
<script type="text/javascript">
/*<![CDATA[*/
// Day Gantt Chart (06-October-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcDayGantt={

init:function(o){
var id=o.ID,obj=document.getElementById(id),tasks=o.Tasks,slide=document.createElement('DIV'),sz=o.Minut eSize,sz=typeof(sz)=='number'?sz:5,ary=[],m,h,hr,tsk,t,s,f,z0=0,z1=0;
slide.className=o.TimeBarClass;
slide.style.position='absolute';
slide.style.left='0px';
m=slide.cloneNode(false);
for (;z0<60*24;z0++){
m=slide.cloneNode(false);
m.className=o.MinuteClass;
m.style.left=z0*sz+'px';
document.body.appendChild(m);
h=m.offsetHeight;
if (z0%60==0){
m.className=o.HourClass;
hr=document.createElement('DIV');
hr.innerHTML=z0/60>9?z0/60:'0'+z0/60;
m.appendChild(hr);
ary.push(z0*sz);
}
else {
m.style.height=h+(z0%30==0?sz*2:z0%5==0?sz:0)+'px';
}
slide.appendChild(m);
}
obj.appendChild(slide);
slide.style.width=m.offsetLeft+sz+'px';
for (;z1<tasks.length;z1++){
if (tasks[z1]&&typeof(tasks[z1][0])=='string'){
s=tasks[z1][3];
f=tasks[z1][4];
if (typeof(s)=='string'&&typeof(f)=='string'){
s=s.split(':');
s[1]=s[1]||0;
f=f.split(':');
f[1]=f[1]||0;
if (isFinite(s[0]*1)&&isFinite(s[1]*1)&&isFinite(f[0]*1)&&isFinite(f[1]*1)){
s=s[0]*60*sz+s[1]*sz;
f=f[0]*60*sz+f[1]*sz;
tsk=document.createElement('DIV');
tsk.className=tasks[z1][0];
t=document.createElement('DIV');
t.className=tasks[z1][2];
t.innerHTML=tasks[z1][1]||'';
tsk.appendChild(t);
slide.appendChild(tsk);
tsk.style.left=s+'px';
tsk.style.width=f-s+'px';
tasks[z1]=[tsk].concat(tasks[z1]);
if (typeof(o.MouseUp)=='function'){
this.addevt(tsk,'mouseup','mouseup',id,z1);
}
}
}
}
}
this['zxc'+id]={
slide:slide,
min:-(m.offsetLeft+sz-obj.offsetWidth),
ary:ary,
tasks:tasks,
mu:o.MouseUp
}
},

Hour:function(id,nu){
var o=this['zxc'+id];
if (o&&typeof(o.ary[nu])=='number'){
o.slide.style.left=Math.max(-o.ary[nu],o.min)+'px';
}
},

mouseup:function(id,nu){
var o=this['zxc'+id];
if (o&&o.tasks[nu]){
o.mu(o.tasks[nu]);
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}

}

zxcDayGantt.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
TimeBarClass:'timebar', // the class name of the time bar slider. (string)
MinuteClass:'minute', // the class name of the minute gratical. (string)
HourClass:'hour', // the class name of the hour gratical. (string)
MinuteSize:4, // the minute width. (number)
Tasks:[ // an array of arrays defining the tasks. (array)
// field 0 = the task class name.
// field 1 = the task title.
// field 2 = the task title class name.
// field 3 = the task start time.
// field 4 = the task finish time.
['task1','Task 1','title','2:20','3:30'],
['task2','Task 2','title','3:20','4:40'],
['task1','Task 3','title','16:20','18:40']
],
MouseUp:function(task){ //(optional) the function to call on mouseup of a task. (function)
task[0].parentNode.style.left=-task[0].offsetLeft+'px';
}
});

zxcDayGantt.Hour('tst',2);
/*]]>*/
</script></body>

</html>

jalarie
10-06-2012, 04:38 PM
He did not say that the browser could not handle it. His point is that the code is totally redundant as there is no modern browser that does not support document.getElementById(). That suggests that the code is rather old. I would have thought that a professor seeking to give "excellent responses" would know that"

The "excellent responses" part had a "we" in front of it, indicating that "we as a group of people trying to help others" might be able to give those responses once we are told what he really wants.

Who's a professor?! I'm a puppy who learned to type with his teeth. Canines, of course. <grin>

maka79
10-08-2012, 09:43 AM
Hi! Thanks to everybody for your responses. Actually, the example provided by vwphilips is pretty similar to what I need, but it is a bit too basic.

You can find one of the examples I talked about in my first post following this link: http://taitems.github.com/jQuery.Gantt/. This chart suites my needs except the (essencial) fact that hours and minutes are not correctly represented. Unfortunately, I have not enough time to modify the source code to suite my needs.

So, my real question is: somebody knows about a similar javascript library that represents correctly hours and minutes granularity?

Bye!

vwphillips
10-08-2012, 04:08 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
position:absolute;overflow:hidden;left:100px;top:100px;width:800px;height:173px;border:solid red 1px;background-Color:#FFFF66;
}

.titlediv {
position:absolute;left:0px;top:50px;width:200px;background-Color:green;border-Right:solid red 1px;
}

.title {
position:relative;left:0px;top:0px;width:200px;height:40px;background-Color:#99FFFF;border-Top:solid red 1px;
}

.title DIV {
position:absolute;left:10px;top:10px;font-Size:12px;
}

.timebar {
position:absolute;left:0px;top:0px;height:50px;background-Color:#FFFFCC;
}

.minute {
position:absolute;left:0px;top:0px;width:1px;height:20px;background-Color:red;
}

.hour {
position:absolute;left:0px;top:0px;width:1px;height:40px;background-Color:blue;
}

.hour DIV {
position:absolute;left:0px;top:30px;width:60px;font-Size:12px;
}

.graticule {
position:absolute;left:0px;top:0px;width:1px;height:1px;background-Color:#C9C9C9;
}

.taskbar {
position:absolute;left:0px;top:0px;
}

.task1 {
position:absolute;left:0px;top:10px;height:20px;background-Color:#FFCC66;
}

.task1 DIV {
position:absolute;left:10px;top:3px;font-Size:12px;
}

.task2 {
position:absolute;left:0px;top:10px;height:20px;background-Color:#FFCC66;
}

.task2 DIV {
position:absolute;left:10px;top:3px;font-Size:12px;
}

.example {
position:absolute;left:5px;top:5px;width:185px;height:33px;border:solid red 1px;background-Color:#FFFF66;text-Align:center;padding-Top:5px;
}

/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Hour 0" onmouseup="zxcDayGantt.Hour('tst',0);"/>
<input type="button" name="" value="Hour 2" onmouseup="zxcDayGantt.Hour('tst',2);"/>
<input type="button" name="" value="Hour 4" onmouseup="zxcDayGantt.Hour('tst',4);"/>
<input type="button" name="" value="Hour 6" onmouseup="zxcDayGantt.Hour('tst',6);"/>
<input type="button" name="" value="Hour 8" onmouseup="zxcDayGantt.Hour('tst',8);"/>
<input type="button" name="" value="Hour 10" onmouseup="zxcDayGantt.Hour('tst',10);"/>
<input type="button" name="" value="Hour 12" onmouseup="zxcDayGantt.Hour('tst',12);"/>
<input type="button" name="" value="Hour 14" onmouseup="zxcDayGantt.Hour('tst',14);"/>
<input type="button" name="" value="Hour 16" onmouseup="zxcDayGantt.Hour('tst',16);"/>
<input type="button" name="" value="Hour 28" onmouseup="zxcDayGantt.Hour('tst',28);"/>
<div id="tst" >
<div class="example" >Example Day Gantt Chart</div>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script type="text/javascript">
/*<![CDATA[*/
// Day Gantt Chart (08-October-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcDayGantt={

init:function(o){
var id=o.ID,obj=document.getElementById(id),nu=o.Days,nu=parseInt(typeof(nu)=='number'?nu:4),tasks=o.Tas ks,ms=o.SlideDuration,div=document.createElement('DIV'),div1,days,sz=o.MinuteSize,sz=typeof(sz)=='nu mber'?sz:5,hrs=[],m,h,hr,tsk,t,s,f,lft,top,slide,title,z0=0,z1=0,z2=0;
div.style.position='absolute';
div.style.left='0px';
div1=div.cloneNode(false);
obj.appendChild(div1);
days=div.cloneNode(false);
div.className=o.TitleDivClass;
obj.appendChild(div);
lft=div.offsetWidth;
top=div.offsetTop;
obj.appendChild(div1);
div1.style.left=lft+'px';
days.className=o.TimeBarClass;
days.style.left=lft+'px';
m=days.cloneNode(false);
for (;z1<60*nu;z1++){
m=days.cloneNode(false);
m.className=o.MinuteClass;
m.style.left=z1*sz+'px';
document.body.appendChild(m);
h=m.offsetHeight;
if (z1%5==0){
g=days.cloneNode(false);
g.className=o.GraticuleClass;
g.style.left=z1*sz+'px';
g.style.height=obj.offsetHeight+'px';
div1.appendChild(g);
}
if (z1%60==0){
m.className=o.HourClass;
hr=document.createElement('DIV');
hr.innerHTML=z1/60>9?z1/60:'0'+z1/60;
m.appendChild(hr);
hrs.push(hr);
}
else {
m.style.height=h+(z1%30==0?sz*2:z1%5==0?sz:0)+'px';
}
days.appendChild(m);
}
div1.appendChild(days);
days.style.width=m.offsetLeft+sz+'px';
days.style.left='0px';
days.style.width=m.offsetLeft+sz+'px';
slide=days.cloneNode(false);
slide.className='taskbar';
for (;z2<tasks.length;z2++){
if (tasks[z2]&&typeof(tasks[z2][2])=='string'){
s=tasks[z2][4];
f=tasks[z2][5];
if (typeof(s)=='string'&&typeof(f)=='string'){
s=s.split(':');
s[1]=s[1]||0;
f=f.split(':');
f[1]=f[1]||0;
if (isFinite(s[0]*1)&&isFinite(s[1]*1)&&isFinite(f[0]*1)&&isFinite(f[1]*1)){
title=document.createElement('DIV');
title.className=tasks[z2][1];
t=document.createElement('DIV');
t.innerHTML=tasks[z2][0]||'';
title.appendChild(t);
div.appendChild(title);
s=s[0]*60*sz+s[1]*sz;
f=f[0]*60*sz+f[1]*sz;
tsk=document.createElement('DIV');
tsk.className=tasks[z2][3];
t=document.createElement('DIV');
t.innerHTML=tasks[z2][2]||'';
tsk.appendChild(t);
t=document.createElement('DIV');
t.style.position='absolute';
t.style.left='0px';
t.style.top=top+title.offsetTop+'px';
slide.appendChild(t);
t.appendChild(tsk);
t=t.cloneNode(false);
t.style.width=m.offsetLeft+sz+'px';
t.className=o.GraticuleClass;
div1.appendChild(t);
tsk.style.left=s+'px';
tsk.style.width=f-s+'px';
tasks[z2]=[tsk].concat(tasks[z2]);
if (typeof(o.MouseUp)=='function'){
this.addevt(tsk,'mouseup','mouseup',id,z2);
}
}
}
}
}
div1.appendChild(slide);
obj.appendChild(div);
obj.style.width=m.offsetLeft+sz+lft+'px';
this['zxc'+id]={
ms:typeof(ms)=='number'&&ms>20?ms:20,
slide:slide,
hrs:hrs,
now:0,
sz:sz,
tasks:tasks,
mu:o.MouseUp
}
},

Hour:function(id,nu){
var o=this['zxc'+id],hr,d,z0=0;
if (o){
for (var z0=0;z0<o.hrs.length;z0++){
hr=(nu+z0)%24;
d=Math.floor(nu/24);
o.hrs[z0].innerHTML=hr>9?hr:'0'+hr+(d<1?'':' +'+d+' days');
}
clearTimeout(o.dly);
this.animate(o,o.slide.offsetLeft,-nu*60*o.sz,new Date(),o.ms);
}
},

animate:function(o,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
o.slide.style.left=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.now=t;
o.slide.style.left=t+'px';
}
},

mouseup:function(id,nu){
var o=this['zxc'+id];
if (o&&o.tasks[nu]){
clearTimeout(o.dly);
o.mu(o.slide,o.tasks[nu]);
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}

}

zxcDayGantt.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
Days:3, // the number of days to display. (number)
TitleDivClass:'titlediv', // the class name of the title DIV. (string)
TimeBarClass:'timebar', // the class name of the time bar. (string)
MinuteClass:'minute', // the class name of the minute graticules. (string)
HourClass:'hour', // the class name of the hour graticules. (string)
GraticuleClass:'graticule', // the class name of the task 5 minute and task graticules. (string)
Tasks:[ //(optional) an array of arrays defining the tasks. (array)
// field 0 = the task title.
// field 1 = the task class name.
// field 2 = the task bar title.
// field 3 = the task bar class name.
// field 4 = the task bar start time.
// field 5 = the task bar finish time.
['My Task 1','title','Task 1','task1','2:20','3:30'],
['My Task 2','title','Task 2','task2','3:20','4:40'],
['My Task 3','title','Task 3','task1','16:20','18:40']
],
MinuteSize:4, // the minute width. (number,default = 5)
SlideDuration:500, //(optional) the slide duration in milli seconds. (number, default = 20)
MouseUp:function(slide,task){ //(optional) the function to call on mouseup of a task. (function)
slide.style.left=-task[0].offsetLeft+'px';
}
});

zxcDayGantt.Hour('tst',2);
/*]]>*/
</script></body>

</html>

what other features do you want?

maka79
10-09-2012, 09:17 AM
Thank you vwphillips. Code you sent me it's ok.

Bye!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum