Index

万年カレンダー（休日付）

　JavaScript製万年カレンダーのサンプルです。ここで制作するものは、休日（祭日）を区別表示します。カレンダーは、DOMを使用して、HTMLページを更新しなくても、カレンダーの部分だけが更新表示されるようにしています。対象ブラウザは、IE5以上、NN6以上、Safari、Firefox などのDOM使用可能なブラウザです。

・関連ページ

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

sasaraan programming

Exposition

■作成する関数とメンテナンス部

　今回作成する関数は以下の通りです。

関数名	機能
・InitCalendar(parent_id)	... カレンダーの初期化 : SetThisMonth関数を呼び出す
・SetCalender(year,month)	... カレンダーの作成 : テーブルの作成
・SetPrevMonth()	... 前月の表示 : SetCalendar関数を呼び出す
・SetThisMonth()	... 今月の表示 : SetCalendar関数を呼び出す
・SetNextMonth()	... 翌月の表示 : SetCalendar関数を呼び出す

　最初に "InitCalendar" 関数を呼び出せば、当月のカレンダーが表示されます。この時、引数に親オブジェクトの id 文字列を渡す必要があります。

<div id="cal"></div>
<script type="text/javascript"><!--
    InitCalendar("cal");
//--></script>

　カレンダーは土日は自動的に背景色が付くようにしますが、祝日は別に管理する必要があります。そのため、宣言部分で、年をキーとする祝日用の連想配列をあらかじめ作成しておき、必要に応じて参照するようにします。

var aYear = new Array();    // 祝日用の配列
// メンテナンス部分 --------------------------------------
// 年間休日リスト（日曜以外）： 月の区切りは"0".配列の終端は"-1" 
aYear["A.D.2005"] = new Array(1,10,0,11,0,21,0,29,0,3,4,5,0,0,18,0,0,19,23,0,10,0,3,23,0,23,-1);
aYear["A.D.2006"] = new Array(2,9,0,11,0,2,0,29,0,3,4,5,0,0,17,0,0,18,23,0,9,0,3,23,0,23,-1);
aYear["A.D.2007"] = new Array(1,8,0,12,0,21,0,30,0,3,4,5,0,0,16,0,0,17,24,0,8,0,3,23,0,24,-1);
//-----------------------------------------------------

■カレンダーの作成

　以下に初期化とカレンダーを作成するコードを掲げます。CSSもコード内で設定しているため、行数がかさんでいます。適宜別関数にしたり、CSSを別記述にしてもかまいません。

// グローバル変数
var aDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // 月毎の日数
var aWeek = new Array("日", "月", "火", "水", "木", "金", "土");  // 曜日表示文字列
var objParent;        // 親オブジェクト
var tCalendar;        // カレンダーオブジェクト（テーブル）
var nYear = 0;        // 現在表示中の年
var nMonth = 0;      // 現在表示中の月

// 初期化（最初に呼び出す）
function InitCalendar(parent_id) {
    if (document.getElementById) {
        objParent = document.getElementById(parent_id);
        SetThisMonth();
    }
}

// カレンダーの表示
// 引数 : year（表示年）, month（表示月）
function SetCalendar(year, month) {
    // 変数
    var nDate = new Date();            // 現在のDateオブジェクト
    var nToday = nDate.getDate();   // 今日の日にち 
    var nDays;            // 表示月の日数
    var nFirstDay;       // 表示月初日の曜日インデックス
    var bToday;          // 表示月に今日が含まれるかどうか
    var i, j;

    nYear = year;
    nMonth = month
    bToday = (nYear == nDate.getFullYear() && nMonth == nDate.getMonth() + 1)? true: false;

    // ひと月の日数
    nDays = aDays[nMonth-1];
    if (nMonth == 2) {    /* 閏月のチェック */
        if (nYear % 400 == 0) nDays =29;
        else if (nYear % 100 == 0) nDays = 28;
        else if (nYear % 4 == 0) nDays= 29;
    }
	
    // 年月の描画
    tCalendar = document.createElement("table");
    with (tCalendar) {
        style.width = "160px";
        style.margin = "0";
        style.tableLayout = "fixed";
        style.border = "1px solid #009900";
        style.backgroundColor = "#f5ffea";
        style.fontSize = "12px";
        style.lineHeight = "16px";
    }
    var tbCalendar = document.createElement("tbody");

    // 見出し行（年月）
    var trCaption = document.createElement("tr");
    var tdCaption = document.createElement("td");
    var strCaption = document.createTextNode(nYear + "年 " + nMonth + "月")
    with (tdCaption) {
        colSpan = "7";
        style.padding = "0px";
        style.borderBottom = "1px solid #cccccc";
        style.textAlign = "center";
    }
    trCaption.appendChild(tdCaption);    // 見出しセル
    tdCaption.appendChild(strCaption);

    // 月移動ボタン（リンク）
    var aHref = new Array("SetPrevMonth()", "SetThisMonth()", "SetNextMonth()");
    var aTarget = new Array("前月", "今月", "翌月");
    for (i = 0; i < 3; i++) {
        var lnk = document.createElement("a");
        lnk.style.marginLeft = "5px";
        lnk.style.fontSize= "11px";
        lnk.style.color = "green";
        lnk.href = "javascript:" + aHref[i];
        lnk.appendChild(document.createTextNode(aTarget[i]));
        tdCaption.appendChild(lnk);
    }

    tbCalendar.appendChild(trCaption);  // 見出し行

    // 曜日行
    var trWeek = document.createElement("tr");
    for (i = 0; i < 7; i++) {
        var tdWeek = document.createElement("td");
        with (tdWeek) {
            style.padding = "0";
            style.textAlign = "center";
            appendChild(document.createTextNode(aWeek[i]));
        }
        trWeek.appendChild(tdWeek);
    }
    tbCalendar.appendChild(trWeek);  // 曜日行

    // 日にち行
    nDate.setFullYear(nYear);
    nDate.setMonth(nMonth-1);
    nDate.setDate(1);                // Dateオブジェクトに表示月の1日をセット
    nFirstDay = nDate.getDay();  // 月初の曜日インデックス

    // 月末まで表示
    var row = document.createElement("tr");
    var cell = new Array(nDays);
    for (i = -nFirstDay, j = 0; i < nDays; i++) {
        cell[i] = document.createElement("td");
        with (cell[i]) {
            style.padding = "0";
            style.textAlign = "center";
            if (i < 0) {    /* 一日まで空白で埋める */
                appendChild(document.createTextNode(" "));
            } else {
                appendChild(document.createTextNode(i+1));    // 日付
                // 背景色
                if (j == 0) style.backgroundColor = "#ffcccc";    //日曜日
                else if (j == 6) style.backgroundColor = "#ccccff"; // 土曜日
                else style.backgroundColor = "transparent";     // 平日
            }
            row.appendChild(cell[i]);
        }
        if (++j == 7 && i != nDays-1) {    /* 土曜でかつ月末以外の時 */
            tbCalendar.appendChild(row);
            row = document.createElement("tr");
            j = 0;
        } 
    }

    // 祭日の背景色を変更 
    var aRefHoliday = aYear["A.D."+nYear];       // 祭日配列の参照
    if (aRefHoliday) {
        for (i=0, j=1; j+1<=nMonth; i++) {    /* 該当月までスキップ */
            if (aRefHoliday[i] == -1) break;
            if (aRefHoliday[i] == 0) j++;
        }
        while (aRefHoliday[i] > 0) {    /* 該当月の終り(0か-1)までループ */
            cell[aRefHoliday[i++]-1].style.backgroundColor = "#ffcccc";
　      }
    }

    // 今日が含まれる時は該当部分の背景色を変更
    if (bToday) cell[nToday-1].style.backgroundColor = "#99ff99";
    tbCalendar.appendChild(row);

    //テーブルの表示
    tCalendar.appendChild(tbCalendar);
    objParent.appendChild(tCalendar);
}

■月を移動させるコード

　以下は今月、前月または翌月へ移動するための関数です。一旦、表示中のカレンダーオブジェクトを破棄して、新たに作成し直しています。上記コードではリンク・タグ（Aタグ）に結び付けていますが、ボタン・オブジェクトのクリック・イベントハンドラに結び付けても構いません。

// 前月の表示
function SetPrevMonth() {
    if (nMonth == 1) {    /* 表示が1月の時は年を調整 */
        nMonth = 12;
        nYear--;
    } else {
        nMonth--;
    }
    if (tCalendar) objParent.removeChild(tCalendar);
    SetCalendar(nYear, nMonth);
}

// 翌月の表示
function SetNextMonth() {
    if (nMonth == 12) {    /* 表示が12月の時は年を調整 */
        nMonth = 1;
        nYear++;
    } else {
        nMonth++;
    }
    if (tCalendar) objParent.removeChild(tCalendar);
    SetCalendar(nYear, nMonth);
}

// 今月の表示
function SetThisMonth() {
    if (tCalendar) objParent.removeChild(tCalendar);
    var nDate = new Date();        // 現在の年、月の取得
    SetCalendar(nDate.getFullYear(), nDate.getMonth() + 1);
}