カレンダ

  1. 概要


    1. 概要

      今月のカレンダを作成します。今日は赤色で表示します。


    2. 手法

      今月の1日の曜日は、次のように取得できます。new Date() で今日の日時の情報がdateに取得できます。setDate(1)でdateの日付を１に変更します。getDay()で今月1日の曜日の番号が取得できます。
      var date=new Date();
date.setDate(1);
startDay=date.getDay();
      　これで、startDayに今月の1日の曜日（日曜が0、土曜が６の数字）が入ります。各月の日数や、曜日の表示文字は配列に設定しておきます。カレンダの表示には　html のテーブルタグを利用します。

    3. 閏年（月の日数）

      少し面倒なのは、閏年の問題です。1年は正確には365日でないため、毎年誤差がでます。4年に1回、100年に1回、さらに400年に1回補正が必要です。
       if(((year%4==0)&&(year%100!=0))||(year%400==0)) {
  monthdays[1]=29; }

  2. プログラム

    1. 準備

      曜日の表示文字列をdays[ ]に、各月の日数を monthdays[ ]に記録します。

    2. プログラム

      カレンダの表示は<table>タグを利用します。表になにも書かないと罫線も出ないので、1日までに &nbsp （強制の空白）を書き込みます。

      <html>
<title>Show Calendar</title>
<script type="text/javascript">
<!--
function showCalender() {
//今日の月のカレンダを表示
//今日の日は赤色で表示
 var year, today, startDay, lastday;
 var monthdays=new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
 var days=new Array("Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat");
 var date=new Date();//今日の日付を取得
  year=date.getFullYear();
 today=date.getDate();
 
 //うるう年の検査
 if(((year%4==0)&&(year%100!=0))||(year%400==0)) {
  monthdays[1]=29;
 }
 thisMonthdays=monthdays[date.getMonth()];

 //1日の曜日を知る
 date.setDate(1);
 startDay=date.getDay();
 date.setDate(thisMonthdays);
 lastDay=date.getDay();
 
 //表示開始 年・月表示
 document.write("<table border='1'>");
 document.write("<tr><th colspan='7' bgcolor='fffafa'>");
 document.write(year, '年', date.getMonth()+1, '月');
 document.write("</th></tr>");
 
 // 曜日の表示
 document.write("<tr>");
 for(i=0; i<7; i++) {
  if(i==0) {
   document.write("<th bgcolor='#ffb6c1'>", days[i], "</th>");
  }
  else if(i==6) {
   document.write("<th bgcolor='#6495ed'>", days[i], "</th>");
  }
  else {
   document.write("<th>", days[i], "</th>");
  }
 }
 document.write("</tr>")
 
 // 日にちの表示
 document.write("<tr>");
 var col=0;
 for(i=0; i<startDay; i++){
  document.write("<td>&nbsp;</td>");
  col++;
 }
 for(i=1; i<=thisMonthdays; i++) {
  document.write("<td>");
  if(i==today) {
   document.write("<font color='#ff0000'><b>");
  }
  document.write(i);
  if(i==today) {
   document.write("</b></font>");
  }
  document.write("</td>");
  col++;
  if(col==7) {
   document.write("</tr>\n<tr>");
   col=0;
  }
 }
 //残りの日を表示
 for(i=lastDay+1;i<7;i++){
  document.write("<td>&nbsp;</td>");
 }
 document.write("</tr>\n");
 document.write("</table>");
  //document.write("last:"+lastDay);
}
//-->
</script>

<body bgcolor="#fff8dc">
  <h3>カレンダーを表示する</h3>
  <hr />
  <script type="text/javascript">
  <!--
   showCalender();
  //-->
  </script>
</body>
</html>

    3. 実行

      ここから実行できます。今日の月のカレンダが表示され、今日が赤字で表示されます。

    4. 発展

      年と月を任意に設定できるようにしよう。
      家族の重要な記念日を登録し、その日を色を変えて表示しよう。