|
Universal Calendar
Sourcecode:
<head>
<style>
div,.title,.year {text-align: center;}
textarea {border-top-width: 0px; border-bottom-width: 0px;
border-left-width: 0px; border-right-width: 0px; overflow: hidden;}
.title {font-size:120%; font-weight:bold;}
.year {font-size:12; font-weight:bold;}
.info {color:#000000; font-weight:bold; text-decoration:none}
.info:hover {color:#FF0000; text-decoration:none}
.unit {font-size:12; text-align: center;}
.options {font-size:80%;}
.caltype {font-family: Arial,Helvetica,Sans-serif; font-weight:bold;}
.gray1 {background:#C0C0C0;}
.gray2 {background:#C0F0F0;}
.black {color:#ffffff; background:#000000;}
.frametop,.framemid,.framebot {border-color: #000000;
border-style: solid; border-left-width: 2px; border-right-width: 2px;}
.frametop {border-top-width: 2px; border-bottom-width: 0px;}
.framemid {border-top-width: 0px; border-bottom-width: 0px;}
.framebot {border-top-width: 0px; border-bottom-width: 2px;}
</style>
<script language="JavaScript1.2">
var transition;
var caltype;
var month_len = "0,31,28,31,30,31,30,31,31,30,31,30,31".split (",");
var month_start = new Array (13);
var first_day = 1;
function display_3months (m1, m2, m3)
{
month_name_pre = "<th class=\"frametop black\">";
month_name_post = "</th>";
days_header = "<td class=\"framemid gray1\"><textarea
readonly class=\"gray1\" rows=1 cols=22> Su Mo Tu We Th Fr Sa </textarea></th>";
month_data_pre = "<td class=\"framebot gray2\"><textarea readonly
class=\"gray2\" rows=6 cols=22 name=";
month_data_post = "></textarea></td>";
blank_cell = "<td> </td>";
blank_line = "<tr><td><img height=5 src=\"null.bmp\"></td></tr>";
// Display 3 months across
document.write (
"<tr>" +
month_name_pre + m1 + month_name_post + blank_cell +
month_name_pre + m2 + month_name_post + blank_cell +
month_name_pre + m3 + month_name_post +
"</tr>" +
"<tr>" +
days_header + blank_cell +
days_header + blank_cell +
days_header +
"</tr>" +
"<tr>" +
month_data_pre + m1 + month_data_post + blank_cell +
month_data_pre + m2 + month_data_post + blank_cell +
month_data_pre + m3 + month_data_post +
"</tr>");
if (m3 != "December")
document.write (blank_line);
}
function leap_year (year)
{
if (caltype == "Julian")
return ((year % 4) == 0);
else
return ((((year % 4) == 0) && ((year % 100) != 0)) || ((year % 400) == 0));
}
function get_weekday (year, month, day)
{
var y = parseInt (year, 10);
var m = parseInt (month, 10);
var d = parseInt (day, 10);
// Make Jan and Feb to be the 13th and 14th month of the previous year
if (m < 3)
{
m += 12;
y--;
}
// Convert year to a positive number. There is a 2800-year repetition (7*400)
if (y < 0)
y += Math.floor((-y + 2799) / 2800) * 2800;
// Calculate the weekday (0=Sun, 1=Mon ... 6=Sat)
if (caltype == "Julian")
return (d + 2*m + Math.floor((3*(m+1))/5) + y + Math.floor(y/4) - 1) % 7;
else
return (d + 2*m + Math.floor((3*(m+1))/5) + y + Math.floor(y/4) -
Math.floor(y/100) + Math.floor(y/400) + 1) % 7;
}
function check_for_transition_year (year, month, day)
{
if (year != transition)
return;
date = year + "-" + month + "-" + day
var m = 0;
// Finagle the month_start values to give the correct calendar
if (date == "1582-10-4")
month_start[m=10] -= 10;
else if (date == "1752-9-2")
month_start[m=9] -= 11;
else if (date == "1918-1-31")
{
month_start[m=2] -= 13;
first_day = 14;
}
// Fix the rest of the months
if (m > 0)
{
caltype = "Gregorian";
for (m++; m <= 12; m++)
month_start[m] = get_weekday (year, m, 1);
}
}
function update_month (year, month, Month)
// Note: 'month' = month number (1..12), 'Month' is the month's <textarea> object
{
value = "";
// Loop over the weeks of a month (each line in the month display)
for (w = 0; w < 6; w++)
{
// Loop over each day for the week
for (d = 0; d < 7; d++)
{
day = (7*w + d + 1) - month_start[month];
if ((day >= first_day) && (day <= month_len[month]))
{
first_day = 1;
if (day < 10)
value += " " + day;
else
value += " " + day;
}
else
value += " "
// Check if this is a transition year and adjust parameters
check_for_transition_year (year, month, day);
}
value += "\n";
}
Month.value = value;
}
function get_radio_button_value (Button)
{
for (i = 0; i < Button.length; i++)
if (Button[i].checked)
return Button[i].value;
return "";
}
function update_calendar (Form)
{
year = parseInt (Form.Year.value, 10);
// Figure the transition year and caltype
transition = 1000000000;
caltype = get_radio_button_value (Form.Option);
if ((caltype == "1582") || (caltype == "1752") || (caltype == "1918"))
{
transition = parseInt(caltype);
caltype = (year <= transition) ? ("Julian") : ("Gregorian");
}
Form.Caltype.value = "(" + ((year == transition) ? ("Transition") : (caltype)) + ")";
// Fix for leap year and create month_start list
month_len[2] = (leap_year (year)) ? (29) : (28);
for (month = 1; month <= 12; month++)
month_start[month] = get_weekday (year, month, 1);
// Process each month
update_month (year, 1, Form.January);
update_month (year, 2, Form.February);
update_month (year, 3, Form.March);
update_month (year, 4, Form.April);
update_month (year, 5, Form.May);
update_month (year, 6, Form.June);
update_month (year, 7, Form.July);
update_month (year, 8, Form.August);
update_month (year, 9, Form.September);
update_month (year, 10, Form.October);
update_month (year, 11, Form.November);
update_month (year, 12, Form.December);
}
function change_year (Form, incr)
{
if (incr != 0)
{
// Change the year and update the calendar
year = parseInt (Form.Year.value, 10)
Form.Year.value = (isNaN(year)) ? (incr) : (year + incr);
update_calendar (Form);
}
}
</script>
</head>
<body>
<form name="Form">
<div class="year">Calendar for the year:
<input name="Year" class="year" size=6 maxlength=4 autocomplete=off
onKeyDown="update_calendar(this.form);"
onKeyUp ="update_calendar(this.form);">
</div>
<br>
<div class="options">
<div class="unit"><blockquote><a href="TransitionYear.html">Transition year:</a>
<input type=radio name="Option" value="1582" onClick="update_calendar(this.form);">1582
<input type=radio name="Option" value="1752" onClick="update_calendar(this.form);" checked>1752
<input type=radio name="Option" value="1918" onClick="update_calendar(this.form);">1918
<input type=radio name="Option" value="Julian" onClick="update_calendar(this.form);">Julian
<input type=radio name="Option" value="Gregorian" onClick="update_calendar(this.form);">Gregorian
<img src="../images/leftarrow.gif" onClick="change_year(document.Form, -1);"> <b>Year</b>
<img src="../images/rightarrow.gif" onClick="change_year(document.Form, 1);">
<textarea class="caltype" name="Caltype" readonly rows=1 cols=12></textarea>
</blockquote></div>
</div>
<table border=0 cellpadding=4 cellspacing=0 align=center>
<script language="JavaScript1.2">
display_3months ("January", "February", "March");
display_3months ("April", "May", "June");
display_3months ("July", "August", "September");
display_3months ("October", "November", "December");
</script>
</table>
</form>
<script language="JavaScript1.2">
document.Form.Year.focus();
document.Form.Year.value = new Date().getFullYear();
update_calendar (document.Form);
</script>
Mit freundlicher Genehmigung von Joe S. |
zurück