JavaScriptでカレンダー

今月のカレンダーを出力するJavaScriptを開発したので公開。
http://www2s.biglobe.ne.jp/~satosi/gmap/ca.html
他のものと違う特徴としては,
 その月に何日あるとかの情報は処理していない。また,表示している月が何曜日から始まるのかがは,日にち指定で1日にすることで,最初の曜日を取得している。
次の月の1日が何曜日なのかを28日以降の日にちで調べることで,うるう年や100で割れて,400で割り切れないなどの例外処理も全て対応する仕組みを持つ。

なので,細かい例外に非常に強い。(ややこしいところは他人任せ,システム任せともいう。・・・・)

ソースは以下の通り:


<SCRIPT language="JavaScript" type="text/javascript">
var d = new Date();    // 本日(太字表示用)
var first = new Date(); // 今月の1日(はじめの曜日取得用)
var last = new Date();    // 来月の1日(最後の曜日の次を取得用)

first.setDate(1); // 今月1日を設定

// 来月1日の設定
last.setDate(1); // 来月1日を設定
if(d.getMonth() == 11) { // 11(12月)なら、来年の1月
    last.setYear(d.getYear()+1);
    last.setMonth(1);
} else {
    last.setMonth(d.getMonth()+1);
}

document.write("<caption align=\"top\">" + (d.getMonth() + 1) + "月< / caption>");

</SCRIPT>

 <TR>
  <TH bgcolor="#ffcccc">日</TH>
  <TH>月</TH>
  <TH>火</TH>
  <TH>水</TH>
  <TH>木</TH>
  <TH>金</TH>
  <TH bgcolor="#88ffff">土</TH>
 </TR>
<SCRIPT language="JavaScript" type="text/javascript">
var w, i;
document.write("<TR>");
// 1日より前の場所をスキップするために、1日の曜日まで空白セル追加
for(w = 0; w < first.getDay(); w++) {
  document.write("<TD></TD>");
}
// 曜日の背景色を設定
var pre_day = new Array("<TD bgcolor=#ffcccc>", "<TD>",  "<TD>",  "<TD>",  "<TD>", "<TD>",  "<TD bgcolor=#88ffff>");
for(i = 1; i <= 31; i++) {
  // 28日以降で次の日の曜日が次の月の1日と同じ場合は終了
  if(i >= 28 && last.getDay() == (w+1)%7) {
    document.write("</TD>");
    break;
  }
  // 曜日ごとに異なる色指定
  document.write(pre_day[w]); 
  // 本日を太字で表示
  if(i == d.getDate()) {
    document.write("<B>"+i+"</B>");
  } else {
    document.write(i);
  }
  document.write("</TD>");

  // 曜日の更新。次の曜日へ移動
  w++;
  if(w >= 7) { // 週末なら日曜日にし、改行
    document.write("</TR>");
    document.write("<TR>");
    w = 0;
  }


}
document.write("</TR>");
</SCRIPT>
</TABLE>

この記事へのコメント

この記事へのトラックバック