Javascript Gantt with hours/minutes scale

maka79 · 10-05-2012, 05: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, 09:17 PM

Perhaps this will give you a usable starting point:

Code:

<!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, 12:29 AM

WOW!

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

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, 12: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, 01: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, 04:02 AM

Quote:

Originally Posted by Old Pedant

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, 04:05 AM

Quote:

Originally Posted by Old Pedant

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.

Quote:

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, 10:50 AM

Quote:

Originally Posted by jalarie

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, 01:00 PM

Code:

<!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.MinuteSize,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, 03:38 PM

Quote:

Originally Posted by Philip M

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, 08: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, 03:08 PM

Code:

<!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.Tasks,ms=o.SlideDuration,div=document.createElement('DIV'),div1,days,sz=o.MinuteSize,sz=typeof(sz)=='number'?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, 08:17 AM

Thank you vwphillips. Code you sent me it's ok.

Bye!