Solved

Need new calendar

Posted on 2007-12-03
13
548 Views
Last Modified: 2007-12-13
Hi, experts! I am looking for a calendar, but it needs certain characteristics. The easiest way to explain is to have you go to my site, www dot magickitchen dot com. Please add something to the shopping cart and then enter a zip code and hit update.  You will see [Optional] Alternate expected delivery date: and a box. If you click on the box you can see the calendar we are using.

What we need is a calendar we can program to black out certain days (Basically the days we don't deliver on). So the customer won't be able to select Christmas Day, for instance. Right now they can select it, but the cart goes through some computations and selects the closest choice which we do deliver on. Obviously that's a little confusing for our customers at times.

I spoke to our programmer, and he gave me the specifics we need:

1. JS code not too big
2. Must work with IE 6+, firefox 1.5/2.x and safari
3. Must have an easy way to program what dates are not selectable from the calling api (i.e. not something we program in a static file or in the .js file itself as the holidays dates change from year to year.)
4. Has to be free or cheap to license for a whole server (or really cheap if licence by domain)

Thanks- I have also added the code that we are using now, <script src="/cart/js/cart/calendar.js"></script>
/* --- Swazz Javascript Calendar ---

/* --- v 1.0 3rd November 2006

By Oliver Bryant

http://calendar.swazz.org */
 

/* SCOOB HOWTO:

 Add these lines to your html code where you want an input for a date:
 

  <script src="calendar.js"></script>

   <input type="text" value="" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)">

*/
 

/* --- SCOOB addition:  date format selection ---

   *** Just uncomment either the 'USA' or 'ISO' line below

   *** to override the default European date format

 */

var format='EU';   var separator='/';  // EU:   DD/MM/YYYY (DEFAULT FORMAT)

//  format='USA';  var separator='/';  // USA:  MM/DD/YYYY

  format='ISO';  var separator='-';  // ISO:  YYYY-MM-DD

 
 

function getObj(objID)

{

    if (document.getElementById) {return document.getElementById(objID);}

    else if (document.all) {return document.all[objID];}

    else if (document.layers) {return document.layers[objID];}

}
 

function checkClick(e) {

	e?evt=e:evt=event;

	CSE=evt.target?evt.target:evt.srcElement;

	if (getObj('fc'))

		if (!isChild(CSE,getObj('fc')))

			getObj('fc').style.display='none';

}
 

function isChild(s,d) {

	while(s) {

		if (s==d) 

			return true;

		s=s.parentNode;

	}

	return false;

}
 

function Left(obj)

{

	var curleft = 0;

	if (obj.offsetParent)

	{

		while (obj.offsetParent)

		{

			curleft += obj.offsetLeft

			obj = obj.offsetParent;

		}

	}

	else if (obj.x)

		curleft += obj.x;

	return curleft;

}
 

function Top(obj)

{

	var curtop = 0;

	if (obj.offsetParent)

	{

		while (obj.offsetParent)

		{

			curtop += obj.offsetTop

			obj = obj.offsetParent;

		}

	}

	else if (obj.y)

		curtop += obj.y;

	return curtop;

}

	

document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');

document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="/img/cart/cal_arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="/img/cart/cal_arrowrightmonth.gif"></td></tr>');

document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">S</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">W</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">F</td><td align=center style="background:#ABABAB;font:12px Arial">S</td></tr>');

for(var kk=1;kk<=6;kk++) {

	document.write('<tr>');

	for(var tt=1;tt<=7;tt++) {

		num=7 * (kk-1) - (-tt);

		document.write('<td id="v' + num + '" style="width:18px;height:18px">&nbsp;</td>');

	}

	document.write('</tr>');

}

document.write('</table>');
 

document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);
 
 

// Calendar script

var now = new Date;

var sccm=now.getMonth();

var sccy=now.getFullYear();

var ccm=now.getMonth();

var ccy=now.getFullYear();

var ccd;                // SCOOB: new code
 

var updobj;

function lcs(ielem) {

	updobj=ielem;

	getObj('fc').style.left=Left(ielem);

	getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;

	getObj('fc').style.display='';

	

	// First check date is valid

	curdt=ielem.value;

//	curdtarr=curdt.split('/');        // SCOOB old code:

	curdtarr=curdt.split(separator);  // SCOOB: new code

	isdt=true;

	for(var k=0;k<curdtarr.length;k++) {

		if (isNaN(curdtarr[k]))

			isdt=false;

	}

	if (isdt&(curdtarr.length==3)) {
 

// SCOOB: New code if/else if/else

	   if (format=='USA') {      // USA foramt:  MM/DD/YYYY

		ccm=curdtarr[0]-1;

	        ccd=curdtarr[1];

		ccy=curdtarr[2];
 

	   }

	   else if (format=='ISO') { // ISO format:  YYYY-MM-DD

		ccy=curdtarr[0];

		ccm=curdtarr[1]-1;

	        ccd=curdtarr[2];

	   }

	   else {                    // DEFAULT behavior:  i.e. European format DD/MM/YYYY

	        ccd=curdtarr[0];

		ccm=curdtarr[1]-1;

		ccy=curdtarr[2];

	   }
 

	   prepcalendar(ccd,ccm,ccy);

	}

	

}
 

function evtTgt(e)

{

	var el;

	if(e.target)el=e.target;

	else if(e.srcElement)el=e.srcElement;

	if(el.nodeType==3)el=el.parentNode; // defeat Safari bug

	return el;

}

function EvtObj(e){if(!e)e=window.event;return e;}

function cs_over(e) {

	evtTgt(EvtObj(e)).style.background='#FFCC66';

}

function cs_out(e) {

	evtTgt(EvtObj(e)).style.background='#C4D3EA';

}

function cs_click(e) {

	updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)];

	getObj('fc').style.display='none';

	

}
 

var mn=new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');

var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');

var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');

var calvalarr=new Array(42);
 

function f_cps(obj) {

	obj.style.background='#C4D3EA';

	obj.style.font='10px Arial';

	obj.style.color='#333333';

	obj.style.textAlign='center';

	obj.style.textDecoration='none';

	obj.style.border='1px solid #6487AE';

	obj.style.cursor='pointer';

}
 

function f_cpps(obj) {

	obj.style.background='#C4D3EA';

	obj.style.font='10px Arial';

	obj.style.color='#ABABAB';

	obj.style.textAlign='center';

	obj.style.textDecoration='line-through';

	obj.style.border='1px solid #6487AE';

	obj.style.cursor='default';

}
 

function f_hds(obj) {

	obj.style.background='#FFF799';

	obj.style.font='bold 10px Arial';

	obj.style.color='#333333';

	obj.style.textAlign='center';

	obj.style.border='1px solid #6487AE';

	obj.style.cursor='pointer';

}
 

// day selected

function prepcalendar(hd,cm,cy) {

	now=new Date();

	sd=now.getDate();

	td=new Date();

	td.setDate(1);

	td.setFullYear(cy);

	td.setMonth(cm);

	cd=td.getDay();

	getObj('mns').innerHTML=mn[cm]+ ' ' + cy;

	marr=((cy%4)==0)?mnl:mnn;

	for(var d=1;d<=42;d++) {

		f_cps(getObj('v'+parseInt(d)));

		if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {

			dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));

			htd=((hd!='')&&(d-cd==hd));

			if (dip)

				f_cpps(getObj('v'+parseInt(d)));

			else if (htd)

				f_hds(getObj('v'+parseInt(d)));

			else

				f_cps(getObj('v'+parseInt(d)));
 

			getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;

			getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;

			getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;

			

			getObj('v'+parseInt(d)).innerHTML=d-cd;	

 
 
 

			// SCOOB: New code if/else if/else

			if (format=='USA') {      // USA foramt:  MM/DD/YYYY

			    calvalarr[d]=''+(cm-(-1))+separator+(d-cd)+separator+cy;

			}

			else if (format=='ISO') { // ISO format:  YYYY-MM-DD

			    calvalarr[d]=''+cy+separator+(cm-(-1))+separator+(d-cd);    // SCOOB: new code

			}

			else {                    // DEFAULT behavior:  i.e. European format DD/MM/YYYY

			    calvalarr[d]=''+(d-cd)+separator+(cm-(-1))+separator+cy;

			}

		}

		else {

			getObj('v'+d).innerHTML='&nbsp;';

			getObj('v'+parseInt(d)).onmouseover=null;

			getObj('v'+parseInt(d)).onmouseout=null;

			getObj('v'+parseInt(d)).style.cursor='default';

			}

	}

}
 

prepcalendar('',ccm,ccy);

//getObj('fc'+cc).style.visibility='hidden';
 

function caddm() {

	marr=((ccy%4)==0)?mnl:mnn;

	

	ccm+=1;

	if (ccm>=12) {

		ccm=0;

		ccy++;

	}

	cdayf();

	prepcalendar('',ccm,ccy);

}
 

function csubm() {

	marr=((ccy%4)==0)?mnl:mnn;

	

	ccm-=1;

	if (ccm<0) {

		ccm=11;

		ccy--;

	}

	cdayf();

	prepcalendar('',ccm,ccy);

}
 

function cdayf() {

if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm)))

	return;

else {

	ccy=sccy;

	ccm=sccm;

	cfd=scfd;

	}

}

Open in new window

0
Comment
Question by:mel200
  • 7
  • 6
13 Comments
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Interesting requirements.
On what kind of server does your site execute?
I presume that you have a database, what kind?
Would it be reasonable to have the "current" holidays identified in the database?
I haven't looked at your calendar.js yet.  From where did it come?  Was it developed by someone there, or picked up off the web?
0
 

Author Comment

by:mel200
Comment Utility
Hi,

I'm going to ask those questions of my developer to be sure I get the right answers. I do know that the calendar we're using comes from the web. Thanks, I'll get back to you as soon as I can!
0
 

Author Comment

by:mel200
Comment Utility
Hi! I'm back with the response from my programmer:

The questions they ask are implying more integration than they need to be concerned with.
We use perl / mysql.  We have a database with the list of holidays of interest.
We have the ability to write code to create an html page that will have the correct javascript
code to call a calendar script with a list of holidays for the coming 2 months.

Therefore and as stated in my original requirements list, we need a js date picker script that
we can call with a list of blacked out "days of the week" (so you can disable sunday delivery,
regardless of the date) and that you can also feed a list of dates that are to be blacked out
(i.e. not selectable).

The person was probably referring to a javascript that would call back the server interactively
 to fetch the list of blacked out dates for a given month.   If there were to suggest an ajax type
script to do that kind of work, I could write a backend to answer such requests.
0
 

Author Comment

by:mel200
Comment Utility
Hi! Did those answers help? Do you have any suggestions? Thanks!
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
sorry, swamped at the present time for my full time job.  I hope to get back to this shortly.
0
 

Author Comment

by:mel200
Comment Utility
Ok, thanks! Sorry I was a pest....
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Here's some Ajax code that I have used to great success.
It creates an xmlHttp object, and uses it to invoke a servlet on the application server to perform a lookup.  In your case, the information that is sent can easily be a date & zip code.

The response from the server can then be the list of available, or unavailable days in the specified month, when can then be used to either create/update a drop down list, or list of radio button entries.

Is this the kind of thing for which you were looking?
<script type='text/javascript'>

  //------------------------------------------------------------------

  // Ajax routines for server request/response

  //------------------------------------------------------------------

  var xmlHttp;
 

  //------------------------------------------------------------------

  // Name: createXMLHttpRequest()

  // Role: Create the XML Request Object used by the Ajax routines

  //------------------------------------------------------------------

  function createXMLHttpRequest() {

    if ( window.ActiveXObject ) {

      xmlHttp = new ActiveXObject( 'Microsoft.XMLHTTP' );

    } else if ( window.XMLHttpRequest ) {

      xmlHttp = new XMLHttpRequest();

    }

  }

      

  //------------------------------------------------------------------

  // Name: getInfo()

  // Role: Issue the request to the Delivery servlet

  //------------------------------------------------------------------

  function getInfo( zip, date ) {

    createXMLHttpRequest();

    var queryString = '/Lookup/Available?Zip=' + zip + '&Date=' + date;

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.open( 'GET', queryString, true );

    xmlHttp.send( null );

  }
 

  //------------------------------------------------------------------

  // Name: handleStateChange()

  // Role: Callback routine invoked when XML Request state changes

  // Note: The comment lines can be used to display the state changes

  //       for debug/development purposes

  //------------------------------------------------------------------

  function handleStateChange() {

//  var field = document.getElementById( 'state' );

//  field.value += xmlHttp.readyState + ' ';

    if ( xmlHttp.readyState == 4 ) {

//      field.value += '  RC = ' + xmlHttp.status;

      if ( xmlHttp.status == 200 ) {

         parseResults();

      }

    }

  }
 

  //------------------------------------------------------------------

  // Name: parseResults()

  // Role: Routine used to process results of lookup

  //------------------------------------------------------------------

  function parseResults() {

    var rspDiv = document.getElementById( 'serverResponse' );

    var rspText = document.createTextNode( xmlHttp.responseText );

    rspDiv.innerHTML = rspText.data;

  }

</script>

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
Comment Utility
Alright, I think I understand things better now.
I reformatted, and commented your code (see below).

I would suggest that you change the code to invoke a wrapper routine/function,
instead of precalendar().  This code would take the specified parameters, and
use Ajax code (like that shown above) to contact the "date availability" servlet,
 to obtain the "blacklist" (i.e., list of unavailable dates) for the month being generated.
Once the response is received, the callback routine (e.g., handleStateChange) would
call prepcalendar(), and provide the blacklist (presumably the list of unavailable dates
would be much smaller than available ones) as well as the currently provided month,
day, and year values.

prepcalendar() would then use this information to decide how to set the characterists
for each calendar entry.  If a date is not selectable, then the code could call f_cpps()
(which sets the "textDecoration" style attribute as line-through) as well as clearing
(i.e., setting to null) the event handlers.

Does this make sense?
/* --- Swazz Javascript Calendar ---

/* --- v 1.0 3rd November 2006

By Oliver Bryant

http://calendar.swazz.org */

 

/* SCOOB HOWTO:

 Add these lines to your html code where you want an input for a date:

 

  <script src="calendar.js"></script>

   <input type="text" value="" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)">

*/

 

/* --- SCOOB addition:  date format selection ---

   *** Just uncomment either the 'USA' or 'ISO' line below

   *** to override the default European date format

 */

var

//  format='EU';   var separator='/';  // EU:   DD/MM/YYYY (DEFAULT FORMAT)

    format='USA';  var separator='/';  // USA:  MM/DD/YYYY

//  format='ISO';  var separator='-';  // ISO:  YYYY-MM-DD

 

  //------------------------------------------------------------------

  // Name: getObj()

  // Role: Attempt to "locate" the document object specified by the

  //       given ID.

  // Note: It is possible for this routine to return null

  //------------------------------------------------------------------

  function getObj( objID ) {

    if ( document.getElementById ) {

      return document.getElementById( objID );

    } else if ( document.all ) {

      return document.all[ objID ];

    } else if ( document.layers ) {

      return document.layers[ objID ];

    } 

    alert( 'getObj(): unable to locate document object' );

    return null; 

  }

   

  //------------------------------------------------------------------

  // Name: isChild()

  // Role: Look up the hierarchy to see if 's' is a descendent of 'd'

  //------------------------------------------------------------------

  function isChild( s, d ) {

    while( s ) {

      if ( s == d ) 

        return true;

      s = s.parentNode;

    }

    return false;

  }

   

  //------------------------------------------------------------------

  // Name: checkClick()

  // Role: Process onclick event

  // Note: Specifically see if the object with id=fc is a descendent

  //       of the source element (i.e., the clicked item), and if so,

  //       hide the fc element.

  //------------------------------------------------------------------

  function checkClick( e ) {

    evt = ( e ) ? e : event;

    CSE = ( evt.target ) ? evt.target : evt.srcElement;

    var fc = getObj( 'fc' );

    if ( fc )

      if ( !isChild( CSE, fc ) )

        fc.style.display = 'none';

  }

   

  //------------------------------------------------------------------

  // Name: Left()

  // Role: Determine the left offset of the object on the window

  //------------------------------------------------------------------

  function Left( obj ) {

    var curleft = 0;

    if ( obj.offsetParent ) {

      while ( obj.offsetParent ) {

        curleft += obj.offsetLeft

        obj = obj.offsetParent;

      }

    } else if ( obj.x )

      curleft += obj.x;

    return curleft;

  }

   

  //------------------------------------------------------------------

  // Name: Top()

  // Role: Determine the left offset of the object on the window

  //------------------------------------------------------------------

  function Top( obj ) {

    var curtop = 0;

    if ( obj.offsetParent ) {

      while ( obj.offsetParent ) {

        curtop += obj.offsetTop

        obj = obj.offsetParent;

      }

    } else if ( obj.y )

      curtop += obj.y;

    return curtop;

  }

    

  //------------------------------------------------------------------

  // Note: This code depends upon the fact that the containing script

  //       section is part of the document body.

  //------------------------------------------------------------------

  document.write( '<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>' );

  document.write( '<tr><td style="cursor:pointer" onclick="csubm()"><img src="/img/cart/cal_arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="/img/cart/cal_arrowrightmonth.gif"></td></tr>' );

  document.write( '<tr><td align=center style="background:#ABABAB;font:12px Arial">S</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">W</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">F</td><td align=center style="background:#ABABAB;font:12px Arial">S</td></tr>' );

  for ( var kk = 1; kk <= 6; kk++ ) {

    document.write( '<tr>' );

    for( var tt = 1; tt <= 7; tt++ ) {

      num = 7 * ( kk - 1 ) - ( -tt );

      document.write( '<td id="v' + num + '" style="width:18px;height:18px">&nbsp;</td>' );

    }

    document.write( '</tr>' );

  }

  document.write( '</table>' );

   

  document.all ? document.attachEvent( 'onclick',checkClick ) : document.addEventListener( 'click', checkClick, false );

   

   

  // Calendar script

  var now  = new Date;

  var sccm = now.getMonth();           // Current month of year 0..11

  var sccy = now.getFullYear();        // Current 4 digit year

  var ccm  = now.getMonth();           // Default month

  var ccy  = now.getFullYear();        // Default 4 digit year

  var ccd;                             // SCOOB: new code

   

  var updobj;

  

  //------------------------------------------------------------------

  // Name: lcs()

  // Role: Process/validate the specified input element value

  //       (ielem.value), and display the corresponding calendar, if

  //       possible.

  //------------------------------------------------------------------

  function lcs( ielem ) {

    updobj = ielem;

    

    var fc = getObj( 'fc' );

    fc.style.left = Left( ielem );

    fc.style.top  = Top( ielem ) + ielem.offsetHeight;

    fc.style.display = '';

    

    // First check date is valid

    curdt = ielem.value;

    //  curdtarr = curdt.split('/');        // SCOOB old code:

    curdtarr = curdt.split( separator );    // SCOOB: new code

    var isdt = true;                        // Is Valid Date?

    for ( var k = 0; k < curdtarr.length; k++ ) {

      if ( isNaN( curdtarr[ k ] ) )

        isdt = false;                       // Non-numeric field

    }

    if ( isdt & ( curdtarr.length == 3 ) ) {

   

  // SCOOB: New code if/else if/else

      if ( format == 'USA' ) {              // USA foramt:  MM/DD/YYYY

        ccm = curdtarr[ 0 ] - 1;

        ccd = curdtarr[ 1 ];

        ccy = curdtarr[ 2 ];

   

      } else if ( format == 'ISO') {        // ISO format:  YYYY-MM-DD

        ccy = curdtarr[ 0 ];

        ccm = curdtarr[ 1 ] - 1;

        ccd = curdtarr[ 2 ];

       }

      else {                                // DEFAULT behavior:  i.e. European format DD/MM/YYYY

        ccd = curdtarr[ 0 ];

        ccm = curdtarr[ 1 ] - 1;

        ccy = curdtarr[ 2 ];

      }

   

       prepcalendar( ccd, ccm, ccy );       // Prep cal, for a specific date

    }

    

  }

   

  //------------------------------------------------------------------

  // Name: evtTgt()

  // Role: Identify/locate event target

  //------------------------------------------------------------------

  function evtTgt( e ) {

    var el;

    if ( e.target )

      el = e.target;

    else if ( e.srcElement )

      el = e.srcElement;

    if ( el.nodeType == 3 )

      el = el.parentNode;                   // defeat Safari bug

    return el;

  }

  

  //------------------------------------------------------------------

  // Name: EvtObj()

  // Role: Guarantee appropriate/valid event object

  //------------------------------------------------------------------

  function EvtObj( e ) {

    if( !e )

      e = window.event;

    return e;

  }

  

  //------------------------------------------------------------------

  // Name: cs_over()

  // Role: Set the event target background - during mouse over event

  //------------------------------------------------------------------

  function cs_over( e ) {

    evtTgt( EvtObj( e ) ).style.background = '#FFCC66';

  }

  

  //------------------------------------------------------------------

  // Name: cs_out()

  // Role: Set the event target background - during mouse out event

  //------------------------------------------------------------------

  function cs_out(e) {

    evtTgt( EvtObj( e ) ).style.background = '#C4D3EA';

  }

  

  //------------------------------------------------------------------

  // Name: cs_click()

  // Role: Using the selected object (i.e., the one the user clicked),

  //       update the associated "update object" field (updobj), with

  //       the corresponding date value.

  //------------------------------------------------------------------

  function cs_click( e ) {

    updobj.value = calvalarr[ evtTgt( EvtObj( e ) ).id.substring( 1, evtTgt( EvtObj( e ) ).id.length ) ];

    getObj( 'fc' ).style.display = 'none';

  }

   

  var mn  = 'JAN,FEB,MAR,APR,MAY,JUN,JUL,AUG,SEP,OCT,NOV,DEC'.split( ',' );

  var mnn = '31,28,31,30,31,30,31,31,30,31,30,31'.split( ',' );

  var mnl = '31,29,31,30,31,30,31,31,30,31,30,31'.split( ',' );

  var calvalarr = new Array( 42 );

   

  //------------------------------------------------------------------

  // Name: f_cps()

  // Role:

  //------------------------------------------------------------------

  function f_cps( obj ) {

    var os = obj.style;

    os.background     = '#C4D3EA';

    os.font           = '10px Arial';

    os.color          = '#333333';

    os.textAlign      = 'center';

    os.textDecoration = 'none';

    os.border         = '1px solid #6487AE';

    os.cursor         = 'pointer';

  }

   

  //------------------------------------------------------------------

  // Name: f_cpps()

  // Role:

  //------------------------------------------------------------------

  function f_cpps( obj ) {

    var os = obj.style;

    os.background     = '#C4D3EA';

    os.font           = '10px Arial';

    os.color          = '#ABABAB';

    os.textAlign      = 'center';

    os.textDecoration = 'line-through';

    os.border         = '1px solid #6487AE';

    os.cursor         = 'default';

  }

   

  //------------------------------------------------------------------

  // Name: f_hds()

  // Role:

  //------------------------------------------------------------------

  function f_hds( obj ) {

    var os = obj.style;

    os.background = '#FFF799';

    os.font       = 'bold 10px Arial';

    os.color      = '#333333';

    os.textAlign  = 'center';

    os.border     = '1px solid #6487AE';

    os.cursor     = 'pointer';

  }

   

  //------------------------------------------------------------------

  // Name: isLeapyear()

  // Role: Determine if the specified year is a recognized Leap Year

  //  URL: http://en.wikipedia.org/wiki/Leap_year

  // Note: The year must be:

  // - evenly divisible by 4       - e.g., 1900, 1904, 1908,...

  // - not evenly divisible by 100 - e.g., 1904, 1908, 1912,...

  // - or  evenly divisible by 400 - e.g., 2000, 2400, 2800,...

  //------------------------------------------------------------------

  function isLeapYear( year ) {

    year = parseInt( year );           // Guarantee numeric value

    return ( year % 4 != 0 ) ? false : ( year % 100 != 0 ) ? true : ( year % 400 == 0 ) ? true : false;

  }

  

  // day selected

  //------------------------------------------------------------------

  // Name: precalendar()

  // Role: Prepare calendar with the specified date noted

  //------------------------------------------------------------------

  function prepcalendar( hd, cm, cy ) {

    now = new Date();                  // Today's date

    sd  = now.getDate();               // Day in month 1..31

    td  = new Date();                  // Target  date

    td.setDate( 1 );                   //   1st of month

    td.setFullYear( cy );              //   Specified year

    td.setMonth( cm );                 //   Specified month

    cd  = td.getDay();                 //   Day of week for 1st

    getObj( 'mns' ).innerHTML = mn[ cm ] + ' ' + cy;  // Month name & year

    var marr = isLeapYear( cy ) ? mnl : mnn;

    //----------------------------------------------------------------

    // This "build the calendar" loop uses an array to hold the

    // calendar.  The most we will need is 6 * 7 = 42 elements:

    //

    //  Best case scenario             Worst case scenario

    // +---+---+---+---+---+---+---+  +---+---+---+---+---+---+---+

    // | S | M | T | W | T | F | S |  | S | M | T | W | T | F | S | 

    // +---+---+---+---+---+---+---+  +---+---+---+---+---+---+---+

    // | 1 | 2 | 3 | 4 | 5 | 6 | 7 |  |   |   |   |   |   |   | 1 |

    // +---+---+---+---+---+---+---+  +---+---+---+---+---+---+---+

    // | 8 | 9 |10 |11 |12 |13 |14 |  | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

    // +---+---+---+---+---+---+---+  +---+---+---+---+---+---+---+

    // |15 |16 |17 |18 |19 |20 |21 |  | 9 |10 |11 |12 |13 |14 |15 |

    // +---+---+---+---+---+---+---+  +---+---+---+---+---+---+---+

    // |22 |23 |24 |25 |26 |27 |28 |  |16 |17 |18 |19 |20 |21 |22 |

    // +---+---+---+---+---+---+---+  +---+---+---+---+---+---+---+

    //                                |23 |24 |25 |26 |27 |28 |29 |

    //                                +---+---+---+---+---+---+---+

    //                                |30 |31 |   |   |   |   |   |

    //                                +---+---+---+---+---+---+---+

    //----------------------------------------------------------------

    // For each element of our array (calvalarr), determine:

    // if ( this represents a valid "day of the month" ) {

    //   sent up appropriate event handlers 

    //   assign cell contents

    // } else { // - we have a "padding" cell, so we should

    //  clear any event handlers,

    //  clear the cell contents

    // }

    //----------------------------------------------------------------

    for ( var d = 1; d <= 42; d++ ) {

      var day = getObj( 'v' + d );     // Table "document" field for this day

      f_cps( day  );                   // Set the object style attributes

      //--------------------------------------------------------------

      // Does this represent a "selectable" day of the month, or a 

      // "padding" cell?

      // Note: One technique used here is "cd - ( -1 )", this handles

      //       the situation where "cd" contains a string value.  If

      //       we tried "cd + 1", we would get the contents of the

      //       string contained within cd concatentated with the

      //       string '1', which is not what we want.  By using '-',

      //       we force the Javascript interpreter to perform

      //       subtraction, which process the operands as numbers, not

      //       as strings.

      //--------------------------------------------------------------

      if ( ( d >= ( cd - ( -1 ) ) ) && ( d <= cd - ( -marr[ cm ] ) ) ) {

        //------------------------------------------------------------

        // dip: day is/in past

        //    = true if the array element represents a non-selectable

        //      date that has come, and gone.

        //------------------------------------------------------------

        var dip = ( ( d - cd < sd ) && ( cm == sccm ) && ( cy == sccy ) );

        //------------------------------------------------------------

        // htd: here today

        //    = User specified date of interest for the specified month

        //------------------------------------------------------------

        var htd = ( ( hd != '' ) && ( d - cd == hd ) );

        if ( dip )

          f_cpps( day );

        else if ( htd )

          f_hds( day );

        else

          f_cps( day );

   

        //------------------------------------------------------------

        // Set the appropriate event handlers, but only for selectable

        // day of month entries.

        //------------------------------------------------------------

        day.onmouseover = ( dip ) ? null : cs_over;

        day.onmouseout  = ( dip ) ? null : cs_out;

        day.onclick     = ( dip ) ? null : cs_click;

        

        day.innerHTML   = d - cd;           // Numeric "day of month", 1..31

   

        // SCOOB: New code if/else if/else

        if ( format == 'USA' ) {            // USA foramt:  MM/DD/YYYY

          calvalarr[ d ] = '' +( cm - ( -1 ) ) + separator + ( d - cd ) + separator + cy;

        } else if ( format == 'ISO' ) {     // ISO format:  YYYY-MM-DD

          calvalarr[ d ] = '' + cy + separator + ( cm - ( -1 ) ) + separator + ( d - cd );    // SCOOB: new code

        } else {                            // DEFAULT behavior:  i.e. European format DD/MM/YYYY

          calvalarr[ d ] = '' + ( d - cd ) + separator + ( cm - ( -1 ) ) + separator + cy;

        }

      } else {

        day.innerHTML    = '&nbsp;';

        day.onmouseover  = null;

        day.onmouseout   = null;

        day.style.cursor = 'default';

      }

    }

  }

   

  prepcalendar( '', ccm, ccy );        // Default calendar - no specific day specified

  //getObj('fc'+cc).style.visibility='hidden';

   

  //------------------------------------------------------------------

  // Name: caddm()

  // Role: Add 1 to the current month & regenerate/prep the calendar

  //------------------------------------------------------------------

  function caddm() {

    ccm += 1;

    if ( ccm >= 12 ) {

      ccm = 0;

      ccy++;

    }

    cdayf();

    prepcalendar( '', ccm, ccy );      // Update calendar - no specific day specified

  }

   

  //------------------------------------------------------------------

  // Name: csubm()

  // Role: Subtract 1 from the current month & regerate/prep the calendar

  //------------------------------------------------------------------

  function csubm() {

    ccm -= 1;

    if ( ccm < 0 ) {

      ccm = 11;

      ccy--;

    }

    cdayf();

    prepcalendar( '', ccm, ccy );      // Update calendar - no specific day specified

  }

   

  //------------------------------------------------------------------

  // Name: cdayf()

  // Role: Adjust calendar date to only display current & future values

  // Note: ccy == current calendar year

  //       ccm == current calendar month

  //------------------------------------------------------------------

  function cdayf() {

    if ( ( ccy > sccy ) | ( ( ccy == sccy ) && ( ccm >= sccm ) ) )

      return;

    else {

      ccy = sccy;

      ccm = sccm;

    }

  }

Open in new window

0
 

Author Comment

by:mel200
Comment Utility
I'm not sure if it is or not. :) But I will work with it. My programmer had me investigating jquery as well, do you know anything about that? Thanks very much!
0
 

Author Comment

by:mel200
Comment Utility
Oh, sorry, I just saw the second entry here. Thanks again, I will give it some work. I really appreciate it.
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Not at all.  If you need additional help, let me know.
0
 

Author Comment

by:mel200
Comment Utility
my apologies! I should have given you the points earlier!
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Oh, good.  I'm glad to be able to help.
Thanks for the grade, and points.
Good luck, and have a Merry Christmas.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

763 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

7 Experts available now in Live!

Get 1:1 Help Now