calendar

カレンダー

ホームページにカレンダーを表示するJavaScriptです。使用法は簡単ですので、JavaScriptを知らなくても、このページのスクリプトをHTMLの中にコピーするだけで利用できます。
このスクリプトを使用すれば、左の例のようにホームページが開かれるたびに、自動的にその月のカレンダーを表示することなどができます。

また、年間のカレンダーなども応用として作成できます。

上の例のように表示するには、下記のようなHTMLを作成します。

↓↓ ここからフリー素材！ご自由にコピーしてご利用下さい。↓↓

<HTML>
<HEAD>
<TITLE>calendar</TITLE>

<!--- カレンダー JavaScript  by 甲斐駒電脳工房 --->
<SCRIPT LANGUAGE="JavaScript">
  function isHoliday(mm, dd){
    if ( (mm == 1 && (dd == 1 || dd == 10))
      || (mm == 2 && (dd == 11))
      || (mm == 3 && (dd == 21))
      || (mm == 4 && (dd == 29))
      || (mm == 5 && (dd == 3 || dd == 4 || dd == 5))
      || (mm == 7 && (dd == 18))
      || (mm == 9 && (dd == 19 || dd == 23))
      || (mm == 10 && (dd == 10))
      || (mm == 11 && (dd == 3 || dd == 23))
      || (mm == 12 && (dd == 23))){
      return 1;
    }else{
      return 0;
    }
  }
  function calendar(mm, borderLine, alignment, hspc, vspc){
    var yy;
    var i, j;
    var today = new Date();
    if (mm == 0){
      mm = today.getMonth()+1;
    }
    yy = today.getYear();
    if (yy < 1900){
    	yy += 1900;  // Netscape の2000年問題を回避するため
    }
    var myDate = new Date(yy, mm-1, 1);
    myDate.setTime(myDate.getTime() - myDate.getDay() * 24*60*60*1000);
    document.write('<TABLE BORDER=' + borderLine);
    if (alignment == 'right' || alignment == 'left'){
      document.write(' ALIGN="' + alignment + '"');
      document.write(' HSPACE=' + hspc + ' VSPACE=' + vspc);
    }
    document.write('><TR><TH COLSPAN=7 ALIGN="center">' + mm + '月</TH></TR>');
    for (i = 0; i < 6; i++){
      if (i < 5 || myDate.getMonth() == mm-1){
        document.write('<TR ALIGN="center">');
        for (j = 0; j < 7; j++){
          if (myDate.getMonth() == today.getMonth()
             && myDate.getDate() == today.getDate()){
            document.write('<TD BGCOLOR=#FFFF00>');
          }else{
            document.write('<TD>');
          }
          if (myDate.getDay() == 0
             || isHoliday(myDate.getMonth()+1, myDate.getDate()) == 1){
            document.write('<FONT COLOR=#FF0000>');
          }else if (myDate.getDay() == 6){
            document.write('<FONT COLOR=#0000FF>');
          }
          if (myDate.getMonth() == mm-1){
            document.write(myDate.getDate());
          }
          if (myDate.getDay() == 0 || myDate.getDay() == 6){
            document.write('</FONT>');
          }
          document.write('</TD>');
          myDate.setTime(myDate.getTime() + 24*60*60*1000);
        }
        document.write('</TR>');
      }
    }
    document.write('</TABLE>');
  }
</SCRIPT>

</HEAD>
<BODY>

<!--- カレンダー JavaScript の呼び出し --->
<SCRIPT LANGUAGE="JavaScript">
  calendar(0, 1, 'left', 10, 10);
</SCRIPT>

</BODY>
</HTML>

↑↑ ここまでフリー素材！ご自由にコピーしてご利用下さい。↑↑

使用法

休日判定関数とカレンダー関数のコピー
上の例の、 から </SCRIPT>まで（紫色の部分）を、カレンダーを表示したいページのHTMLの最初の方（通常、上の例のように、<HEAD>と</HEAD>の間）にコピーします。
これらの関数そのものは、ホームページには表示されません。カレンダー関数を任意の場所から呼び出すことで、呼び出した個所にカレンダーが表示されます。
休日関数の編集
このスクリプトでは、休日（振替休日を含む）かどうか判定する休日判定関数（isHoliday()）を使用しています。休日は年によって異なるため、年が変わるたびに変更する必要があります。上記の例は2005年版ですので、年が変わった場合は、上記の例を参考に編集して下さい。
カレンダー関数の呼び出し
上の例の、 から </SCRIPT>まで（青色の部分）のように、カレンダーを表示したい個所に挿入します。呼び出し方は以下の通りです。
- 書式
  calendar(月, BORDER, ALIGN, HSPACE, VSPACE);
- 引数
  月：表示する月。0を指定すると現在の月を表示する。
  BORDER：罫線の指定。0＝罫線なし。1以上=罫線あり（ブラウザによっては、数値により外枠線の太さが変わる）。
  ALIGN：テキストの回り込み指定。''＝テキストとは別の行に表示。'left'=テキストの左に表示。'right'=テキストの右に表示。
  HSPACE：左右の余白（ピクセル数）。
  VSPACE：上下の余白（ピクセル数）。
  （注）
  BORDER, ALIGN, HSPACE, VSPACE は、いずれもHTMLの<TABLE>タグの属性としてそのまま使用されるものです。（ブラウザによって結果に違いがあるようです。）

作成甲斐駒電脳工房