Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Javascript Gantt with hours/minutes scale

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    624
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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>

  • Users who have thanked jalarie for this post:

    maka79 (10-08-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    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.


    ????
    Last edited by Old Pedant; 10-06-2012 at 12:36 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,595
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    624
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Old Pedant View Post
    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?

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    624
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by jalarie View Post
    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"

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • The Following 3 Users Say Thank You to vwphillips For This Useful Post:

    AndrewGSW (10-06-2012), maka79 (10-08-2012), Philip M (10-06-2012)

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    624
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Philip M View Post
    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>

  • #11
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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?
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    maka79 (10-09-2012)

  • #13
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you vwphillips. Code you sent me it's ok.

    Bye!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •