Solved

Java Script - Date & time Picker

Posted on 2007-11-30
19
651 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
Comment Utility
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
Comment Utility
Ah, I see.  11/30 is a Saturday...

Sorry about that.
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Duh, no 11/30 is today, which is a Friday... (sigh)
0
 
LVL 41

Expert Comment

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

Author Comment

by:Mr_Splash
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
k, I'll work with that then.
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Author Comment

by:Mr_Splash
Comment Utility
Thanks for not forgetting me :)

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

Expert Comment

by:HonorGod
Comment Utility
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
Comment Utility
oh yeah,

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

Author Comment

by:Mr_Splash
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You are very welcome.
Thanks for the points.  Good luck
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now