|
|
There are two places in which the code needs to be modified in order to allow the calendar to be rotated. The first place is in the script tag, in order to get the new parameters out of the URL and modify the month variable. The second place the program needs to be modified is in the body, in order to add links that will add the parameters into the URL and allow the calendar to rotate. I will discuss the second part first so that you'll know what the first part is working with.
This time around, I will add text fields so that the user can simply type in the number of the month and date that they wish to view. This only modifies the first row of the calendar. Here is the modified code:
<tr>
<td align="left" colspan=2>
<b>Month:</b>
<input type="text" name="Month" size="5">
<script language="JavaScript">
<!-
document.theForm.Month.value = fixMonth( month.getMonth() + 1 );
// -->
</script>
</td>
<td colspan=3>
<center>
<b><script language="JavaScript">
<!-
document.write( months[fixMonth( month.getMonth() )] + " " +
fixYear( month.getYear() ) );
// -->
</script></b><br>
<input type="submit" value="Submit">
</center>
</td>
<td align="right" colspan=2>
<b>Year:</b>
<input type="text" name="Year" size="5">
<script language="JavaScript">
<!-
document.theForm.Year.value = fixYear( month.getYear() );
//-->
</script>
</td>
</tr>
The first cell in the row contains a text field for the month and the third cell contains a text field for the year. Both of these are controlled by a Submit button just under the Month heading. The month and year that are being displayed in the calendar are the default values of each of the text fields. When the Submit button is pressed, the page refreshes and changes the calendar. Because the names of the form fields are Month and Year, the exact same code that I used in the perpetual calendar can be used to retrieve them from the URL string:
var urlquery = location.href.split( "?" );
if( urlquery[1] )
{
var params = urlquery[1].split( "&" );
var m = ( params[0] ? params[0].split( "=" )[1] 1 :
fixMonth( now.getMonth() ) );
var y = ( params[1] ? params[1].split( "=" )[1] :
fixYear( now.getYear() ) );
month = new Date( y, m, 1 );
}
Modifying the month variable will, just like before, change what is displayed in the calendar table.
Here is the complete source code for the rotating pop-up calendar; the file name of this code example is Rotating_Popup_Calendar.html:
<html>
<head>
<title>Date Chooser</title>
<style type="text/css">
<!-
.mono{ font-family: monospace; }
-->
</style>
<script language="JavaScript">
<!-
var now = new Date();
var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 );
var months = new Array( "January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December" );
var urlquery = location.href.split( "?" );
if( urlquery[1] )
{
var params = urlquery[1].split( "&" );
var m = ( params[0] ? params[0].split( "=" )[1] 1 :
fixMonth( now.getMonth() ) );
var y = ( params[1] ? params[1].split( "=" )[1] :
fixYear( now.getYear() ) );
month = new Date( y, m, 1 );
}
function fixYear( year )
{
return( year < 1000 ? year + 1900 : year );
}
function fixMonth( month )
{
return( month < 0 ? month + 12 : (month > 11 ? month 12 : month) );
}
function getNumberDays( d )
{
switch( d.getMonth() + 1 )
{
case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
return( 31 );
case 4: case 6: case 9: case 11:
return( 30 );
case 2:
return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); }
}
}
function getEnding( number )
{
if( number > 10 && number < 20 ) return( "th" );
switch( number % 10 )
{
case 0: case 4: case 5:
case 6: case 7: case 8:
case 9:
return( "th" );
case 1:
return( "st" );
case 2:
return( "nd" );
case 3:
return( "rd" );
}
}
function onSelect()
{
}
// -->
</script>
</head>
<body>
<form name="theForm">
<table border="1" width="75%" style="border-collapse: collapse">
<tr>
<td align="left" colspan=2>
<b>Month:</b>
<input type="text" name="Month" size="5">
<script language="JavaScript">
<!-
document.theForm.Month.value = fixMonth( month.getMonth() + 1 );
// -->
</script>
</td>
<td colspan=3>
<center>
<b><script language="JavaScript">
<!-
document.write( months[fixMonth( month.getMonth() )] + " " +
fixYear( month.getYear() ) );
// -->
</script></b><br>
<input type="submit" value="Submit">
</center>
</td>
<td align="right" colspan=2>
<b>Year:</b>
<input type="text" name="Year" size="5">
<script language="JavaScript">
<!-
document.theForm.Year.value = fixYear( month.getYear() ); // -->
</script>
</td>
</tr>
<tr>
<td width="14%"><b><i>Sun</i></b></td>
<td width="14%"><b><i>Mon</i></b></td>
<td width="14%"><b><i>Tue</i></b></td>
<td width="14%"><b><i>Wed</i></b></td>
<td width="14%"><b><i>Thu</i></b></td>
<td width="14%"><b><i>Fri</i></b></td>
<td width="14%"><b><i>Sat</i></b></td>
</tr>
<tr>
<script language="JavaScript">
<!-
var startDay = month.getDay();
for( i = 0 ; i < startDay ; i++ )
{
document.write( "<td></td>" );
}
var numDays = getNumberDays( month );
for( i = 1 ; i < numDays + 1 ; i++ )
{
if( ( i + startDay ) % 7 == 1 )
{
document.write( "</tr><tr>" );
}
document.write(
"<td><center><input type='button' " +
"onClick='JavaScript: document.theForm.date.value=\"" +
fixMonth( month.getMonth() + 1 ) + "/" + i + "/" +
fixYear( month.getYear() ) + "\"; onSelect();' " +
"value='" + (i < 10 ? " " : "") + i + getEnding( i ) + "' " +
"class='mono'>" + "</center></td>" );
}
// -->
</script>
</tr>
</table>
<input type="hidden" name="date">
</form>
</body>
</html>
|
|