CodingForums.com - View Single Post - Javascript Gantt with hours/minutes scale

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>