Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Java Script - Date & time Picker

Posted on 2007-11-30
19
666 Views
Last Modified: 2008-02-01
I'm looking for a Java Script date & time picker script that can adhere to some constraints, as follows.

User cannot choose a date less that 48 hours in the future.
User cannot choose a date past 3 months

The time picker that knows what day of the week it is.
ie if I select 30th of November, the times available on a saturday will be made available to me.

The times are as follows.
Dinner
Monday to Friday availability is 6-9
Saturday 5-9
Sunday 4-9

Lunch
12, 1, 2


So, if the user selected the 30th of November the time picker would look as follows;
12:00, 13:00, 14:00, 17:00, 18:00, 19:00, 20: 00, 21:00

If someone can show me a script I can use or would be willing to write one that would be great!
0
Comment
Question by:Mr_Splash
  • 14
  • 5
19 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 20381555
hm, interesting requirements...

17:00 is 5pm though.  Why is that in the list?

Are only Hours selectable?
Is 24 hour format preferred, or required?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20381566
Ah, I see.  11/30 is a Saturday...

Sorry about that.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20381573
Duh, no 11/30 is today, which is a Friday... (sigh)
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 41

Expert Comment

by:HonorGod
ID: 20381748
What do you prefer, a pop-up calendar, or one that appears on the same page?
0
 
LVL 3

Author Comment

by:Mr_Splash
ID: 20381842
Haha,

Yes my bad, let's say 1st of December was chosen instead.

Nope - doesn't have to be 24hr just preferred
Yes - Only hours are selectable

I'm easy regarding the calendar - can be a row of drop downs - in page calendar - Pop up calendar. if given the option a modal pop up would be perfect but any of the above will be fine.

thanks
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20385434
ok, as a start, let's figure out how you want the calendar to look.
Take a look at the following in your browser, and change it to suit your tastes, and let me know.  In the meantime, I'll continue looking at the code to set it up, based upon your input.
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nov 2007</title>  
<style type='text/css'>
  a {
    text-align       : center;
    text-decoration  : none;
  }
  th {
    color            : black;
    background-color : lightblue;
    font-size        : 1em;
    font-weight      : bold;
  }
  td {
    color            : black;
    background-color : white;
    font-size        : 1em;
    text-align       : center;
    text-decoration  : none;
  }
  .date {
    font-family      : Verdana;
    font-size        : 0.9em;
    text-align       : center;
  }
  .close {
    font-family      : Verdana;
    border-style     : solid;
    border-width     : 1px;
    text-align       : center;
  }
</style>
</head>
<body>
<table id='calT1' border='1' cellpadding='0' cellspacing='0' width='20%'>
 <tr>
   <td>
     <table border='0' cellpadding='1' cellspacing='1' width='100%'>
       <tr>
         <td colspan='6'>
           <table border='0' width='100%' cellpadding='0' cellspacing='0'>
             <tr> 
               <td>
                 <a href='javascript:DecYear();RenderCal();' title='2006'>&lt;&lt;</a>
               </td>
 
               <td>
                 <a href='javascript:DecMonth();RenderCal();' title='Oct'>&lt;</a>
               </td>
 
               <td>
                 Nov 2007
               </td>
 
               <td>
                 <a href='javascript:IncMonth();RenderCal();' title='Dec'>&gt;</a>
               </td>
 
               <td>
                 <a href='javascript:IncYear();RenderCal();' title='2008'>&gt;&gt;</a>
               </td>
             </tr>
           </table>
         </td>
 
         <td class='close'>
           <a href='javascript:CloseCal();' title=Close>X</a>
         </td>
       </tr>
 
       <tr>
         <th class='date'>S</th>
         <th class='date'>M</th>
         <th class='date'>T</th>
         <th class='date'>W</th>
         <th class='date'>T</th>
         <th class='date'>F</th>
         <th class='date'>S</th>
       </tr>
 
       <tr>
         <td class='date'>&nbsp;</td>
         <td class='date'>&nbsp;</td>
         <td class='date'>&nbsp;</td>
         <td class='date'>&nbsp;</td>
         <td class='date'>1</td>
         <td class='date'>2</td>
         <td class='date'>3</td>
       </tr>
 
       <tr>
         <td class='date'>4</td>
         <td class='date'>5</td>
         <td class='date'>6</td>
         <td class='date'>7</td>
         <td class='date'>8</td>
         <td class='date'>9</td>
         <td class='date'>10</td>
       </tr>
 
       <tr>
         <td class='date'>11</td>
         <td class='date'>12</td>
         <td class='date'>13</td>
         <td class='date'>14</td>
         <td class='date'>15</td>
         <td class='date'>16</td>
         <td class='date'>17</td>
       </tr>
 
       <tr>
         <td class='date'>18</td>
         <td class='date'>19</td>
         <td class='date'>20</td>
         <td class='date'>21</td>
         <td class='date'>22</td>
         <td class='date'>23</td>
         <td class='date'>24</td>
       </tr>
 
       <tr>
         <td class='date'>25</td>
         <td class='date'>26</td>
         <td class='date'>27</td>
         <td class='date'>28</td>
         <td class='date'>29</td>
         <td class='date'>30</td>
         <td class='date'>&nbsp;</td>
       </tr>
     </table>
   </td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 3

Author Comment

by:Mr_Splash
ID: 20385849
Hi HonorGod,

The layout is great, it's only colours that I'd change which I'll do when I incorporate it into the site.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20386277
k, I'll work with that then.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20407459
I haven't forgotten you.  :-(
I've been doing some work on it, and I have some additional questions for you.

Which technique would you prefer?  To have the calendar "table(s)" build dynamically
- using DOM calls
- using strings for the "html"?

For example, to create a table using DOM calls, you would need to do something like:

  var tbl  = document.createElement( 'table' );
  tbl.setAttribute( 'border', '0' );          
  tbl.setAttribute( 'width', '100%' );        
  tbl.setAttribute( 'cellpadding', '0' );      
  tbl.setAttribute( 'cellspacing', '0' );      

  var body = document.createElement( 'tbody' );
  tbl.appendChild( body );                    
                                             
  and to create row and cell elements, you would need to:

  var tr = document.createElement( 'tr' );
  var td = document.createElement( 'td' );
...
  tr.appendChild( td );
...
  body.appendChild( tr );


This should give you an idea of the code.  It's not too difficult, just a bit ... verbose.
The alternative would be to put the "table" HTML into a string.  Something like:

  var tbl = '<table border="0" width="100%" cellpadding="0" cellspacing="0">';
  tbl += '<tr><td>';

Which is a bit more concise, however, it too has its shortcomings.

Do you have a preference?
0
 
LVL 3

Author Comment

by:Mr_Splash
ID: 20407906
Thanks for not forgetting me :)

I think having it in strings would be better.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20408873
ok, here's something with which I am working.

Things that need to be done:
- Code to dynamically display the calendar
- Code to determine the position on the window (e.g., so it isn't too far up/down/left/right)
- Code to format the response
- Code to return the selection to the specified document field
- Code to restrict month movement (i.e., no day early than, or later than allowed)

:-)
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Dynamic Calendar - Using strings </title>  
<style type='text/css'>
  a {
    text-align       : center;
    text-decoration  : none;
  }
  th {
    background-color : lightblue;
    color            : black;
    font-size        : 0.9em;
    font-weight      : bold;
  }
  td {
    color            : black;
    font-family      : Verdana;
    font-size        : 0.9em;
    text-align       : center;
    text-decoration  : none;
  }
  .weekday {
    background-color : white;
  }
  .weekend {
    background-color : yellow;
  }
  .today {
    background-color : green;
  }
  .close {
    background-color : red;
    border-style     : solid;
    border-width     : 1px;
    color            : black;
    font-family      : Verdana;
    text-align       : center;
  }
</style>
<script type='text/javascript'>
  //------------------------------------------------------------------
  // Global variables for
  // - DoW = Days of Week
  // - DiM = Days in Month, and
  // - MiY = Months in Year
  //------------------------------------------------------------------
  var DoW  = 'SMTWTFS'.split( '' );
  var DiM  = '31,28,31,30,31,30,31,31,30,31,30,31'.split( ',' );
  var MiY  = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split( ',' );
 
  //------------------------------------------------------------------
  // Name: WDWE()  (i.e., WeekDay or WeekEnd)
  // Role: Looking For the Weekend - return the appropriate class name
  //------------------------------------------------------------------
  function WDWE( d ) {
    return ( ( d > 0 ) && ( d < 6 ) ) ? 'weekday' : 'weekend';
  }
  
  //------------------------------------------------------------------
  // Name: Mon()
  // Role: Adjust Month
  //------------------------------------------------------------------
  function Mon( a ) {
    alert( 'Adjust Month by: ' + a );
  }
  
  //------------------------------------------------------------------
  // Name: CloseCal()
  // Role: 
  //------------------------------------------------------------------
  function CloseCal() {
    alert( 'CloseCal()' );
  }
  
  //------------------------------------------------------------------
  // Name: Pick()
  // Role: Select the specified date
  //------------------------------------------------------------------
  function Pick( d ) {
    alert( 'Selection: ' + d );
  }
  
  //------------------------------------------------------------------
  // Name: init()
  // Role: initialize the calendar table
  //------------------------------------------------------------------
  function init( id ) {                          //
    var today = new Date();                      // today date object 
    var first = new Date( today.getFullYear(), today.getMonth(), 1 );
    var doc   = document.getElementsByTagName( 'body' )[ 0 ];
    
    //----------------------------------------------------------------
    // The top of the table begins with the header details
    //----------------------------------------------------------------
    var tbl = '<table border="1" cellpadding="0" cellspacing="0" width="20%">';
    tbl += '<tr><td colspan="6"><table border="0" width="100%" cellpadding="0" cellspacing="0">';
    tbl += '<tr><td colspan="2" align="right" width="25%" onclick="Mon(-1);">&lt;</td>';
    tbl += '<td colspan="2" align="center" id="Header" width="50%">';
    tbl += MiY[ today.getMonth() ] + ' ' + today.getFullYear();
    tbl += '</td><td colspan="2" align="left" width="25%" onclick="Mon(1);">&gt;</td>';
    tbl += '</tr></table></td><td class="close" onclick="CloseCal();">X</td></tr>';
 
    //----------------------------------------------------------------
    // Then, we have a row for the days of the week column headings
    //----------------------------------------------------------------
    tbl += '<tr>';
    for ( var d = 0; d < DoW.length; d++ ) {
      tbl += '<th>' + DoW[ d ] + '</th>';
    }
    tbl += '</tr><tr>';
 
    //----------------------------------------------------------------
    // For the first week, we may have days of the week occupied by
    // days from the previous month.  Blank these
    //----------------------------------------------------------------
    for ( d = 0; d < first.getDay(); d++ ) {
      tbl += '<td class="' + WDWE( d ) + '">&nbsp;</td>';
    }
 
    //----------------------------------------------------------------
    // For each "real" day of the month, add an onclick='Pick(#)'
    //----------------------------------------------------------------
    for ( D = 1; D < DiM[ today.getMonth() ]; D++ ) {
      tbl += '<td class="' + ( ( D == today.getDate() ) ? 'today' : WDWE( d ) ) + '" onclick="Pick(' + D + ')">' + D + '</td>';
      if ( d == 6 ) {
        tbl += '</tr><tr>';
        d = 0;
      } else {
        d++;
      }
    }
 
    //----------------------------------------------------------------
    // The last week of the month may be a partial week.  Add filler
    // if necessary.
    //----------------------------------------------------------------
    for ( ; d < 7; d++ ) {
      tbl += '<td class="' + WDWE( d ) + '">&nbsp;</td>';
    }
    tbl += '</tr></table>';
 
    //----------------------------------------------------------------
    // Now that we have the complete calendar table in string form,
    // add it to the document.
    //----------------------------------------------------------------
    document.getElementById( id ).innerHTML = tbl;
  }
</script>
</head>
<body onload='init("here");'>
<div id='here'></div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20408886
oh yeah,

- Leap Year computation
- Holiday hours?
- hours based upon day of week
0
 
LVL 3

Author Comment

by:Mr_Splash
ID: 20415488
Ok great,

as for holiday hours would you be able to include the feature but leave the times as normal for now as I'll have to check with client.

Thank you so much for doing this, I really don't want to seem ungrateful but do you have a rough idea of when it would be ready? I wouldn't ask but I'm on a deadline for the whole project.

Also would it help if I purchased a copy of Tigra Calendar Pro and sent it to you to work with?

http://www.softcomplex.com/products/tigra_calendar_pro/
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20422928
Is Tigra Calendar Pro something that your group is using?

That might make things much quicker.

What is your deadine?

It doesn't look like this is prohibited by the help page
http://www.experts-exchange.com/help.jsp

How can you be contacted?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20447205
Would something like this be a reasonable start?
This might be a simple foundation, and if it acceptable,
then code could be added to display the time options,
given the selected date.  What do you think?
<!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>3 Calendars</title>
 
<style type='text/css'>
  .hilite {
    background-color : #dedeff;
  }
 
  .CalHeader {
    text-align       : center;
    background-color : #efefef;
  }
  
  .weekend {
    background-color : yellow;
  }
  
  .blocked {
    background-color : red;
    text-decoration  : line-through;
  }
</style>
 
<script type='text/javascript'>
  //------------------------------------------------------------------
  // Global variables
  //------------------------------------------------------------------
  var DOW     = 'SMTWTFS'.split( '' );
  var MOY     = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split( ',');
  var now     = new Date();          // Today's date
  now = new Date( now.getFullYear(), now.getMonth(), now.getDate() );
 
  var minDate = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 2 );
  var maxDate = new Date( now.getFullYear(), now.getMonth() + 3, now.getDate() );
 
  //------------------------------------------------------------------
  // Name: Calendar()
  // Role: Calendar( [year], [month], [day] );
  //  ==>: String containing HTML to display specified calendar month
  //       as a table.
  //------------------------------------------------------------------
  function Calendar( year, month, day ) {
    var result;
    switch ( arguments.length ) {
        case 0:              // Request for "today's" calendar with hiliting
          result = Cal( new Date(), true );
          break;
        case 2:              // Request for a specific year & month
          result = Cal( new Date( year, month, 1 ), false );
          break;
        case 3:              // Request for a specific date, with hiliting
          result = Cal( new Date( year, month, day ), true );
          break;
        case 1:
        default:
          result = '<b>Calendar() - parameter error: 0, 2, or 3 parms expected.<\/b>';
    }
    return result;
  }
 
  //------------------------------------------------------------------
  // Name: picked()
  // Role: Display specified calendar date
  //------------------------------------------------------------------
  function picked( m, d, y ) {
    alert( 'Selected date: ' + m + '/' + d + '/' + y );
  }
 
  //------------------------------------------------------------------
  //  Name: Cal()
  // Usage: Cal( DateObj, boolean )
  // Where: DO == DateObj - Date for which calendar should be generated
  //        HI == boolean - Hilite specified date (true/false)
  //------------------------------------------------------------------
  function Cal( DO, HI ) {
 
    var year    = DO.getFullYear();    // 4 digit year
    var month   = DO.getMonth();       // Month number (0-11)
    var today   = DO.getDate();        // day of month (1-31)
    var weekday = DO.getDay();         // day of week  (0 Sun - 6 Sat)
 
    var result  = '<table border="1" cellspacing="0" cellpadding="0">';
    result += '<tr><th colspan=7 class="CalHeader">';
    result += MOY[ month ] + '   ' + year + '<\/th><\/tr><tr>';
    for ( var i = 0; i < DOW.length; ++i ) {
      result += '<td class="CalHeader">' + DOW[ i ] + '<\/td>';
    }
    result += '<\/tr><tr>';
 
    var EOM = new Date( year, month + 1, 0 );
    var days = EOM.getDate() + 1;
    //----------------------------------------------------------------
    // For every (possible) day of the month (DOM), ...
    // Note: Not to be confused with Document Object Model (DOM) :-)
    //----------------------------------------------------------------
    for ( var dom = 1; dom < days; ++dom  ) {
      var DOM = new Date( year, month, dom );
      var dow = DOM.getDay();          // Which DOW is this? (0..6)
      //--------------------------------------------------------------
      // On 1st of the month, prepend the appropriate padding
      //--------------------------------------------------------------
      if ( dom == 1 ) {
        for ( var i = 0; i < dow; ++i ) {
          result += '<td>&nbsp;<\/td>';
        }
      }
      result += '<td align="right" ';
 
      if ( ( DOM < minDate ) || ( DOM > maxDate ) ) {
        result += 'class="blocked">' + dom + '<\/td>';
      } else if ( ( dow < 1 ) || ( dow > 5 ) ) {
        result += 'class="weekend" ';
        result += 'onclick="picked( ' + month +  ',' + dom + ',' + year + ')">' + dom + '<\/td>';
      } else {
        result += 'onclick="picked( ' + month +  ',' + dom + ',' + year + ')">' + dom + '<\/td>';
      }
      
      //--------------------------------------------------------------
      // Are we at the end of a week?
      //--------------------------------------------------------------
      if ( dow == 6 ) {
        result += '<\/tr>';
        if ( dom + 1 != days ) {
          result += '<tr>';
        }
      }
     
    }
    //----------------------------------------------------------------
    // Handle the case where month doesn't finish on a Saturday
    //----------------------------------------------------------------
    if ( dow < 6) {
      for ( ; dow < 6; ++dow ) {
        result += '<td>&nbsp;<\/td>';
      }
      result += '<\/tr>';
    }
 
    result += '<\/table>';
    return result;
  }
</script>
</head>
<body>
 
<script type='text/javascript'>
  var table = '<table><tr valign="top">';
  var fig   = new Date();
  var year  = fig.getFullYear();
  var month = fig.getMonth();
  var day   = fig.getDate();
  for ( var i = 0; i < 4; ++i ) {
    table += '<td>' + Calendar( year, month + i ) + '<\/td>';
  }
  table += '<\/tr><\/table>';
  document.write( table );
</script>
 
 
</body>
</html>

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 20451762
This is looking pretty interesting.  Take a look, and tell me what you think...
<!doctype html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>4 Months</title>
 
<style type='text/css'>
  .hidden {
    display : none;
  }
 
  .showing {
    display : block;
  }
 
  .hilite {
    background-color : #dedeff;
  }
 
  .CalHeader {
    text-align       : center;
    background-color : #efefef;
  }
  
  .weekend {
    background-color : yellow;
  }
  
  .blocked {
    background-color : red;
    text-decoration  : line-through;
  }
</style>
 
<script type='text/javascript'>
  //------------------------------------------------------------------
  // Global variables
  //------------------------------------------------------------------
  var DOW     = 'SMTWTFS'.split( '' );
  var MOY     = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split( ',');
  var now     = new Date();          // Today's date
  now = new Date( now.getFullYear(), now.getMonth(), now.getDate() );
 
  var minDate = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 2 );
  var maxDate = new Date( now.getFullYear(), now.getMonth() + 3, now.getDate() );
 
  //------------------------------------------------------------------
  // Name: field()
  // Role: Locate specified document element
  //------------------------------------------------------------------
  function field( id ) {
    var result = document.getElementById( id );
    if ( !result ) {
      alert( 'Specified document element not found.  id=' + id );
    }
    return result;
  }
  
  //------------------------------------------------------------------
  // Name: Calendar()
  // Role: Calendar( [year], [month], [day] );
  //  ==>: String containing HTML to display specified calendar month
  //       as a table.
  //------------------------------------------------------------------
  function Calendar( year, month, day ) {
    var result;
    switch ( arguments.length ) {
        case 0:              // Request for "today's" calendar with hiliting
          result = Cal( new Date(), true );
          break;
        case 2:              // Request for a specific year & month
          result = Cal( new Date( year, month, 1 ), false );
          break;
        case 3:              // Request for a specific date, with hiliting
          result = Cal( new Date( year, month, day ), true );
          break;
        case 1:
        default:
          result = '<b>Calendar() - parameter error: 0, 2, or 3 parms expected.<\/b>';
    }
    return result;
  }
 
  //------------------------------------------------------------------
  // Name: Show()
  // Role: Display specified number of hidden 'Dinner' rows
  //------------------------------------------------------------------
  function Show( num ) {
    num = parseInt( num );
    var low = '18,17,16'.split( ',' );
    var tbl = '<table border="0"><tbody><tr><td colspan="2">Dinner:</td></tr>'
    for ( var i = parseInt( low[ num ] ); i < 22; i++ ) {
      tbl += '<tr><td><input name="TimeSlot" value="' + i + '" onclick="chosen(this);" type="radio"></td><td>' + ( i % 12 ) + ' pm</td></tr>';
    }
    tbl += '</tbody></table>'
    field( 'Dinner' ).innerHTML = tbl;
    
    //----------------------------------------------------------------
    // If the user changes their mind, and picks a different date, we
    // want/need to ensure that any previously selected time slot has
    // the 'checked' attribute cleared.
    //----------------------------------------------------------------
    var TimeSlot = document.getElementsByName( 'TimeSlot' );
    for ( i = 0; i < TimeSlot.length; i++ ) {
      TimeSlot[ i ].checked = false;
    }
  }
 
  //------------------------------------------------------------------
  // Name: twoD()
  // Role: Display at least 2 digits
  //------------------------------------------------------------------
  function twoD( val ) {
    return ( Number( val ) && ( val < 10 ) ) ? '0' + val : val;
  }
  
  //------------------------------------------------------------------
  // Name: picked()
  // Role: Display specified calendar date
  //------------------------------------------------------------------
  function picked( m, d, y ) {
    var days = 'Sun,Mon,Tue,Wed,Thu,Fri,Sat'.split( ',' );
    var date = new Date( y, m, d );
    var dow  = date.getDay();
    field( 'pick' ).innerHTML = days[ dow ] + ' ' + twoD( m + 1 ) + '/' + twoD( d )  + '/' + y;
    var time = field( 'time' );
    if ( time ) {
      time.className = 'showing';
    }
    Show( ( dow == 0 ) ? 2 : ( dow == 6 ) ? 1 : 0 );
  }
 
  //------------------------------------------------------------------
  // Name: chosen()
  // Role: Display user selected time
  //------------------------------------------------------------------
  function chosen( obj ) {
    var choice = ( obj.value % 12 );
    var date = field( 'pick' ).innerHTML;
    alert( date + ' at ' + ( ( choice > 0 ) ? ( choice + ' pm' ) : 'Noon' ) );
  }
 
  //------------------------------------------------------------------
  //  Name: Cal()
  // Usage: Cal( DateObj, boolean )
  // Where: DO == DateObj - Date for which calendar should be generated
  //        HI == boolean - Hilite specified date (true/false)
  //------------------------------------------------------------------
  function Cal( DO, HI ) {
 
    var year    = DO.getFullYear();    // 4 digit year
    var month   = DO.getMonth();       // Month number (0-11)
    var today   = DO.getDate();        // day of month (1-31)
    var weekday = DO.getDay();         // day of week  (0 Sun - 6 Sat)
 
    var result  = '<table border="1" cellspacing="0" cellpadding="0">';
    result += '<tr><th colspan=7 class="CalHeader">';
    result += MOY[ month ] + '   ' + year + '<\/th><\/tr><tr>';
    for ( var i = 0; i < DOW.length; ++i ) {
      result += '<td class="CalHeader">' + DOW[ i ] + '<\/td>';
    }
    result += '<\/tr><tr>';
 
    var EOM = new Date( year, month + 1, 0 );
    var days = EOM.getDate() + 1;      // Number of days in this month
    
    //----------------------------------------------------------------
    // If the first isn't on a Sun (day of week == 0), we need to pad
    // the first week of the month with empty table cels
    //----------------------------------------------------------------
    var DOM = new Date( year, month, 1 );
    var dow = DOM.getDay();          // Which dow is this? (0..6)
    for ( var i = 0; i < dow; i++ ) {
      result += '<td>&nbsp;<\/td>';  // Add an empty table cell
    }
    //----------------------------------------------------------------
    // For every (possible) day of the month (DOM), ...
    // Note: Not to be confused with Document Object Model (DOM) :-)
    //       DOM == Date object for current day of month (dom)
    //----------------------------------------------------------------
    for ( var dom = 1; dom < days; dom++ ) {
      DOM = new Date( year, month, dom );
      dow = DOM.getDay();              // Which DOW is this? (0..6)
      result += '<td align="right" ';
 
      if ( ( DOM < minDate ) || ( DOM > maxDate ) ) {
        result += 'class="blocked">' + dom + '<\/td>';
      } else {
        if ( ( dow < 1 ) || ( dow > 5 ) ) {
          result += 'class="weekend" ';
        }
        result += 'onclick="picked( ' + month +  ',' + dom + ',' + year + ')">' + dom + '<\/td>';
      }
      
      //--------------------------------------------------------------
      // Are we at the end of a week?  If so, complete the current row
      //--------------------------------------------------------------
      if ( dow == 6 ) {
        result += '<\/tr>';
        if ( dom + 1 != days ) {       // Start a new row iff days remain
          result += '<tr>';
        }
      }
     
    }
    //----------------------------------------------------------------
    // Pad the last row of the month, if day of week < Saturday
    //----------------------------------------------------------------
    if ( dow < 6) {
      for ( ; dow < 6; ++dow ) {
        result += '<td>&nbsp;<\/td>';
      }
      result += '<\/tr>';
    }
 
    result += '<\/table>';
    return result;
  }
  
  //------------------------------------------------------------------
  // Name: init()
  // Role: Initialize the 
  //------------------------------------------------------------------
  function init( id ) {
    var div = field( id );
    if ( div ) {
      var tbl   = '<table><tr valign="top">';
      var fig   = new Date();          // Today's date
      var year  = fig.getFullYear();   // What is current year?
      var month = fig.getMonth();      // What is current month?
      for ( var i = 0; i < 4; ++i ) {  // For current and next 3 months
        tbl += '<td>' + Calendar( year, month + i ) + '<\/td>';
      }
      tbl += '<\/tr><\/table>';
      div.innerHTML = tbl;
    }
  }
</script>
</head>
<body onload='init("cals")'>
<div id='cals'></div>
<div id='time' class='hidden'>
<form id='myForm' action=''>
  <table border=1>
    <tr>
      <td id='pick' colspan=2 align='center'></td>
    </tr>  
    <tr valign='top'>  
      <td>
        <table border=0>
          <tr>  
            <td colspan=2>Lunch:</td>
          </tr>  
          <tr>  
            <td><input type='radio' name='TimeSlot' value='12' onclick='chosen(this);' /></td>
            <td>Noon</td>
          </tr>  
          <tr>  
            <td><input type='radio' name='TimeSlot' value='13' onclick='chosen(this);'/></td>
            <td>1 pm</td>
          </tr>  
          <tr>  
            <td><input type='radio' name='TimeSlot' value='14' onclick='chosen(this);'/></td>
            <td>2 pm</td>
          </tr>  
        </table>
      </td>
      <td id='Dinner'>
      </td>
    </tr>  
  </table>
</form>
</div>
</body>
</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20451992
I just re-read some of the earlier comments, and realized that I didn't use the (preferred) 24 hour format.  Let me know if you want that changed.
0
 
LVL 3

Author Comment

by:Mr_Splash
ID: 20607504
Hi HonorGod,

I hope you had a good new year. I'm sorry to say that due to the project deadline we hired a js developer to come in house to write the script.

I've still awarded you the points as I know he used what you've done, thank you.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20608248
You are very welcome.
Thanks for the points.  Good luck
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Jquery 2 23
jQuery Toggle & Anchor Links 5 43
Explain this javascript function to me 2 26
Review of the nodejs code 1 16
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question