単月カレンダー

// 変数
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 nDays;             // 月の日数
var nFirstDay;        // 1日の曜日インデックス
var i, j;                  // カウンタ変数

　aDaysは、1月から12月の各月の日数を配列にしたものです。2月はとりあえず28（日）に設定しておき、後に閏月かどうかをチェックします。
　aWeekは、曜日を表示する際の文字列です。ここでは日本語のオーソドックスな表現を使用しています。
　次のaDateはDateオブジェクトです。現在の日時を取得し、getFullYearメソッドで四桁の西暦、getMonthメソッドで月をw取得します。この時、getMonthで得た数値は０から始まりますので注意が必要です。0 は一月、1は二月、というようになります。
　また、nFirstDayは、1日の曜日インデックスを取得するための変数です。曜日インデックスは、日曜日=0, 月曜日=1. ... 金曜日=5, 土曜日=6　にあらかじめ定義されています。

// ひと月の日数を取得(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);         // Dateオブジェクトに1日をセット
nFirstDay = nDate.getDay();   // 月初日の曜日(0...6)   

　月の日数は、配列aDaysの、現在の月(nMonth)のインデックスの場所の値となります。ただし、2月の場合はうるう年かどうか調べる必要があります。この時、年(nYear)が4の倍数ならうるう年となりますが、100の倍数の年はうるう年にはなりません。さらに、100の倍数でも、400の倍数ならうるう年となります。
　月初の曜日(nFirstDay)を取得するためには、まず、すでに作成してあるDateオブジェクト(nDate、この時点では現在の日時を示している)の日にちに１を設定します。これには、Dateオブジェクトの setDateメソッドを利用します。Dateオブジェクトが示す日時の曜日は、getDayメソッドで取得できます。この時の戻り値は曜日インデックス（日=0, 月=1. ... 土=6）となります。

// 年月の描画(○年○月)
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++) {    /* i=日にち, j=曜日 */
    var sStyle = " style='padding:0; text-align:center;' ";
    if (i < 0) {        /* 1日まで空白で埋める */
        document.write("<td ", sStyle, "> </td>");
    } else {            /* 1日〜末日までを挿入 */
        document.write("<td ", sStyle, ">", i+1, "</td>");
    }
    if (++j == 7 && i != nDays) {    /* 土曜日(j=6)でかつ月末(i=nDays)でなければ、 */
        document.write("</tr><tr>");  // 改行して、
        j = 0;                               // 曜日インデックスを日曜日(0)にセット
    }
}
document.write("</tr></table>");    

　変数の値を取得できれば、あとは描画を行うだけです。一般にはテーブルを利用して作成します。
　上記で分りにくいのが日にちの描画の箇所だと思います。変数 i は日にち(1...31)、j は曜日インデックス(0...6)を表します。日にちは、月初の曜日インデックスをマイナスにした(-nFirstDay)ところからスタートさせていますが、この値がマイナスのうちは前月ということになります。