Index

単月カレンダー（休日付）

　JavaScript製単月カレンダーのサンプルです。ここでは、当月一ヶ月を表示するカレンダーのつくり方を紹介しています。このカレンダーは、日曜、土曜、休日の背景色を設定して見分けがつくようにしています。対象ブラウザは、IE4以上、NN6以上、Safari、Firefox などのブラウザとなります。

・関連ページ

・「日時を表示する」（日時表示の基礎知識）
・「単月カレンダー」（カレンダー入門篇）
・「単月カレンダー（休日付）」（カレンダー初級篇）
・「万年カレンダー」（カレンダー中級篇）
・「万年カレンダー（休日付）」（カレンダー上級篇）

sasaraan programming

Exposition

■変数の宣言

var aHoliday = new Array(2,9,0,11,0,21,0,29,0,3,4,5,0,0,17,0,0,18,23,0,9,0,3,23,0,23,-1);
var aDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var aWeek = new Array("日", "月", "火", "水", "木", "金", "土");
var nDate = new Date();                // 現在の日時のDateオブジェクト
var nYear = nDate.getFullYear();    // 現在の年
var nMonth = nDate.getMonth();    // 現在の月
var nToday = nDate.getDate();      // 今日の日にち
var nDays;         // 月の日数
var nFirstDay;    // 月初の曜日
var i, j, k;

　上記中、aDaysは各月の日数、aWeekは表示する曜日名の配列です。aHolidayは日曜以外の祝日の日にちを配列にしたものです。各月の区切りは 0、配列の終端を -1 で表しています。記述量はかさみますが、各月ごとに配列をつくり、多次元配列にしてもかまいません。この方が視認性は良くなります。（* 上記サンプルは2006年の例です）
なお、getMonthメソッドの取得値は 0から始まる（0→1月, 1→2月, ...）ので注意が必要です。

■月の日数、月初の曜日、該当月の祝日のインデックスの取得

// ひと月の日数を取得(28...31)
nDays = aDays[nMonth];
if (nMonth == 1) {        /* うるう年のチェック */
    if (nYear % 400 == 0) nDays =29;
    else if (nYear % 100 == 0) nDays = 28;
    else if (nYear % 4 == 0) nDays= 29;
}

// 月初の曜日の取得
nDate.setDate(1);
nFirstDay = nDate.getDay();    // 月初日の曜日(0...6)

// 祝日を該当月までスキップ（現在位置を k に格納して維持）
for (i=0, k=0; i<=nMonth-1; k++) {
    if (aHoliday[k] == 0) i++;
}

　表示月が2月の場合は、うるう年かどうかをチェックする必要があります。年が4で割り切れればうるう年、ただし100で割り切れればうるう年でなく、400で割り切れればうるう年となります。
　月初の曜日はDateオブジェクトの日にちに 1 を設定すれば月初を示すDateオブジェクトを取得できます。ここから getDayメソッドで曜日を取得します。取得値は、0（日曜）～6（土曜）の整数です。
　また、描画する日にちが祝日かどうかをチェックする際、すばやく配列(aHoliday)にアクセスできるよう、該当つきのインデックスを取得しておきます。チェックする際は、インデックスを格納した変数 k の位置から始めればよいことになります。

■カレンダーの描画

// 年月の描画(○年○月)
document.write("<table style='width:160px; border:1px solid gray; font-size:12px; line-height:16px;'>");
document.write("<tr><th colspan='7' style='padding:0; border-bottom:solid gray 1px'>");
document.write(nYear, "年 ", nMonth+1, "月");
document.write("</th></tr>");

// 曜日の描画(日...土)
document.write("<tr>");
for (i = 0; i < 7; i++) {
    document.write("<td style='padding:0; border:0; text-align:center;'>", aWeek[i], "</td>");
}
document.write("</tr>");

// 日にちの描画(1...28-31)
document.write("<tr>");
for (i = -nFirstDay, j = 0; i < nDays; i++) {
    var sStyle = " padding:0; text-align:center; ";      // スタイル
    if (i < 0) {        /* 1日まで空白で埋める */
        document.write("<td style='", sStyle, "'>&nbsp;</td>");
    } else {          /* 1日～末日までを挿入 */
        if ((i+1) == nToday) {
            sStyle += " background-color:#99ff99; ";      // 今日
        } else if ((i+1) == aHoliday[k]) {
            sStyle += " background-color:#ffcccc; ";      // 祭日
            k++;
        } else if (j==0) {
            sStyle += " background-color:#ffcccc; ";      // 日曜
        } else if (j==6) {
            sStyle += " background-color:#ccccff; ";      // 土曜
        } else {
            sStyle += " background-color:transparent; ";  // 平日
        }
        document.write("<td style='", sStyle, "'>", i+1, "</td>");
    }
    if (++j == 7 && i != nDays) {    /* 土曜日で月末に達していなければ改行 */
        document.write("</tr><tr>");
        j = 0;
    }
}
document.write("</tr></table>");

　土曜、日曜、祝日、今日の日にちの背景色を平日と区別しています。この設定は日にちの描画の箇所で行っています。なお、ループは月初の曜日インデックスをマイナスした位置からスタートさせています。この値がマイナスのうちは前月の日付であることを示します。