JavaScriptのシンプルなカレンダーです。
丁度ブログのカレンダーのような感じでしょうか。
記事へのリンクは付きませんが(笑)
表(table)として出力され、スタイルシートによりカスタマイズする事が出来ます。
カレンダーを生成するJavaScriptです。
今日の日付を取得し、閏年の判定、曜日の算出、テーブルの出力を行います。
<head>〜</head>の中に置いてください。
<script type="text/javascript"><!--
function cal(year,month,day) {
today=new Date();
if (!year) var year=today.getFullYear();
if (!month) var month=today.getMonth();
else month--;
if (!day) var day=today.getDate();
var leap_year=false;
if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) leap_year=true;
lom=new Array(31,28+leap_year,31,30,31,30,31,31,30,31,30,31);
dow=new Array("日","月","火","水","木","金","土");
var days=0;
for (var i=0; i < month; i++) days+=lom[i];
var week=Math.floor((year*365.2425+days)%7);
var j=0;
var when=year+"年 "+(month+1)+"月";
var calendar="<table summary=\""+when+"のカレンダー\">\n";
calendar+="<caption>"+when+"<\/caption>\n<tr>";
for (i=0; i < 7; i++) calendar+="<td>"+dow[i]+"<\/td>";
calendar+="<\/tr>\n<tr>";
for (i=0; i < week; i++,j++) calendar+="<td><\/td>";
for (i=1; i <= lom[month]; i++) {
calendar+="<td";
if (day == i) calendar+=" class=\"today\"";
calendar+=">"+i+"<\/td>";
j++;
if (j > 6) {
calendar+="<\/tr>\n<tr>";
j=0;
}
}
for (i=j; i > 6; i++) calendar+="<td><\/td>";
calendar+="<\/tr>\n<\/table>\n";
return calendar;
}
// --></script>
cal(年,月,日)として任意の年月日を指定出来ます。
cal() または cal(0,0,0) のように値を無し、または値を0とする事で今月のカレンダー
を出力します。
出力は戻り値の文字列としていますので、document.write()を使って書き出して
ください。
具体的にはスタイルシートでの装飾を考慮して適当なclassを設定したdiv等の中で
scriptタグを使って document.write(cal(年,月,日)); とする事になります。
これを<body>〜</body>の配置したい場所に置いてください。
<div class="cal">
<script type="text/javascript">
document.write(cal());
</script>
</div>
続いてスタイルシートです。<head>〜</head>の中に置いてください。
このページ冒頭のカレンダーのスタイルシート設定例です。
<style type="text/css"><!--
div.cal { float: left; margin: 4px; }
div.cal * { text-align: center; font-size: 9pt; }
div.cal table { border: solid 1px green; width: 140px; }
div.cal caption { border: solid 1px green; border-bottom: none;
background: aquamarine; }
div.cal td.today { background: aquamarine; }
--></style>
(注) MozillaやFirefoxで不具合が出ますので、marginはtableに直接適用しないで
ください。(captionとtableの間に余白が出来てしまいます)
テーブルの行は月によって５〜７行の範囲で増減しますので、tableにno-repeatで
背景画像を貼る場合はその事も考慮する必要があります。
このカレンダーは手抜きのため日曜、祝日等の色分けは出来ません。
グレゴリオ暦の開始された1582年10月15日(金)よりも古い日付には対応しません。
また、グレゴリオ暦は1920年代以前は世界各地にまで普及していなかったようですので、
その当時のカレンダーは一致しない可能性あります。
カレンダーの表題(何年 何月)の部分はcaption、曜日の行はth、
日付はtdで構成しています。
本日(または指定日)のみ<td class="today">とクラス名が付加されます。
スタイルシートを活用する事で柔軟にカスタマイズする事が可能です。
<style type="text/css"><!--
div.cal { margin: 4px; }
div.cal * { text-align: center; font-size: 11pt; }
div.cal table { border: solid 2px hotpink; width: 160px; background: white; }
div.cal caption { border: solid 2px hotpink; border-bottom: none;
background: hotpink; color: white; }
div.cal th { color: hotpink; }
div.cal td { color: pink; }
div.cal td.today { border: dotted 1px orange; color: hotpink; }
--></style>
<style type="text/css"><!--
div.cal { margin: 4px; }
div.cal * { text-align: center; font-size: 11pt; }
div.cal table { width: 160px; border-spacing: 0px; border: solid 1px red;
border-top: none; background: url("rs160.png") top no-repeat; }
div.cal caption { border: solid 1px red; border-bottom: none; }
div.cal th { background: white; opacity: 0.5; filter: Alpha(opacity=50); }
div.cal td.today { background: yellow; }
--></style>