T his calendar allows you to select a month and year and automatically display a complete calendar for that month in Dynamic HTML. If you have forms or anything on your site that requires dates, this is the script for you. You can besides having the calendar on the same page as your form have it in a convenient pop up that we will also show you howto do.
W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms with the exception of Netscape4.08 and Netscape7.0 where it will "Not" work.
D epending on your knowledge of HTML and java script, this is an easy two part copy and paste code with actually no reconfigurations unless you need to. One part is pasted into the <HEAD> section of your document and the last part is inserted anywhere in the <BODY> section of your document where you want this effect to appear. The only reconfigurations you can make are:
1) Put a color behind the clear table the calendar sits in.
2) Add more years to the drop down list.
Default Table Settings In Body Section
<form name="frmCalendarSample" method="post" action="">
<input type="hidden" name="calSelectedDate" value="">
<table border="1">
<tr>
<td>
Reconfigured Table Settings In Body Section
<form name="frmCalendarSample" method="post" action="">N
otice in the above the addition of bgcolor="#ffffff". This will give the table the attribute of any color you so select.
NOTE:
When you change the color of the table, remember to reconfigure the default text color in your <BODY> tag so it will be in contrast with the table color. See the below <BODY> tag to see howto.
<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
[ Color Picker ]
N ow the other thing you can reconfigure is to add more years into the calendar. This is extremely easy this to do. All you do is add more option values into the code also in the <BODY> section of the script.
<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001"<2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</td>
</tr>
N otice that we just added another option value with a different year and made sure it was before the closing </select> tag.
N ow as we told you earlier, we will show you howto add this calendar as a pop up on a page you have other information that will need a calendar but do not want it always shown until called. Below are the steps needed to make this calendar into a pop up.
1) Make a new HTML document with the only thing on it being the calendar codes for the calendar.
2) Add the below code on the page you will call the calendar from. Notice the color coded numbers, They signify the height and width of the pop up window. These you can change to suit your needs.
<A HREF="javascript:void(0)" ONCLICK="open('Path To Page Calendar Is On', 'myannouncer','toolbar=0,location=0,resizable=0,width=340,height=380')">Calendar</A>
3) Below is how the calendar will appear when used in conjunction with the above java script pop up link.
[ Calendar ]
4) You also noticed the "Close Window" button on the pop up calendar page. This adds a little more professionalism to your pop up. This little button is done by adding the below code on the page.
<form>
<input type=button value="Close Window" onClick="javascript:top.window.close();">
</form>
I
f you would like to add this effect to your pages, just grab the below link and you are there. If you have any problems with trhis, feel free to contact us.
[ Get Code Here ]
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-