実行例

<SCRIPT type="text/javascript"><!--
function myCalendar( myTodayOffset ){
// ***********
// 下準備
// ***********
myDate = new Date();	// 今日の日付データ取得
myWeekTbl = new Array( "日","月","火","水","木","金","土" );	// 曜日テーブル定義
myMonthTbl= new Array( 31,28,31,30,31,30,31,31,30,31,30,31 );	// 月テーブル定義
myToday = myDate.getDate();	// 今日の '日' を退避
myMonth = myDate.getMonth();	// 今日の '月' を取得(0月～11月)
myDate.setDate(1);	// 日付を '1日' に変えて、
myMonth = myMonth + myTodayOffset;	// '月' をパラメータに従って変更
myDate.setMonth(myMonth);	// myDate の '年月' を変更
myYear = myDate.getFullYear();	// 西暦取得
myMonth = myDate.getMonth();	// 月を取得(0月～11月)
myWeek = myDate.getDay();	// '１日'の曜日を取得
if (((myYear%4)==0 && (myYear%100)!=0) \|\| (myYear%400)==0){	// うるう年だったら...
myMonthTbl[1] = 29;	// 　２月を２９日とする
}
myTable = new Array(7*6);	// 表のセル数分定義

for(i=0; i<7*6; i++) myTable[i]="・";	// myTableを掃除する
for(i=0; i<myMonthTbl[myMonth]; i++) myTable[i+myWeek]= i+1;	// 日付を埋め込む

// *********************
// カレンダーの表示
// *********************
document.write( "<table border='1'>" );	// 表の作成開始
document.write( "<tr><td align='center' colspan='7' bgcolor='#7fffd4'>" );	// 見出
document.write( "<strong>",myYear, "年", (myMonth+1), "月</strong>" );
document.write( "</td></tr>" );

document.write( "<tr>" );	// 曜日見出しセット
for( i=0; i<7; i++ ){	// 一行(１週間)ループ
document.write( "<td align='center' " );
if ( i==0 ){
document.write( "bgcolor='#fa8072'>" );	// 日曜のセルの色
}else{
document.write( "bgcolor='#ffebcd'>" );	// 月～土のセルの色
}
document.write( "<strong>", myWeekTbl[i], "</strong>" );	// '日'から'土'の表示
document.write( "</td>" );
}
document.write( "</tr>" );

for( i=0; i<6; i++ ){	// 表の「行」のループ
document.write( "<tr>" );	// 行の開始
for( j=0; j<7; j++ ){	// 表の「列」のループ
document.write( "<td align='center' " );	// 列(セル)の作成
myDat = myTable[ j + (i*7) ];	// 書きこむ内容の取得
if ( myDat == myToday && myTodayOffset == 0 ){
document.write( "bgcolor='#00ffff'>" );	// 今日のセルの色
}else if( j==0 ){
document.write( "bgcolor='#ffb6c1'>" );	// 日曜のセルの色
}else{
document.write( "bgcolor='#ffffe0'>" );	// 平日のセルの色
}
document.write( "<strong>", myDat, "</strong>" );	// 日付セット
document.write( "</td>" );	// 列(セル)の終わり
}
document.write( "</tr>" );	// 行の終わり
}
document.write( "</table>" );	// 表の終わり
}	// function の終わり
// --></SCRIPT>

myCalendar(-1);

// --></script>

</td><td>

myCalendar(0);

// --></script>

</td><td>

myCalendar(1);

// --></script>

</td></tr></table>

<SCRIPT type="text/javascript"></SCRIPT>

サンプルだけの HTMLはこちらへ

説明

今回はカレンダーを3つ表示するので、関数化します。
ただ、いつものような関数にすると同じ月（今月）が３つ表示されてしまいます。
ならば、どの月を表示するかパラメータを指定できるようにしてみましょう。

今回は myCalendar( myTodayOffset ) という関数にします。

パラメータには、今月からの月のオフセットを指定します。
今月であれば 0、来月であれば 1、再来月であれば 2、・・、先月であれば -1、先先月であれば -2、・・、といった感じです。

myDate = new Date();
myMonth = myDate.getMonth();
myMonth = myMonth + myTodayOffset;
myDate.setMonth(myMonth);
今日の日付情報を取得して、月にパラメータのオフセットを加算/減算して、setMonth() にて、指定月に変更します。

setMonth( 月 ) と指定すれば、その月の日付情報になります。getMonth() 同様に月は 0月~11月で指定します。
setMonth() は 0~11 以外の数値をセットした場合は、例えば、-1 を指定した場合は、去年の12月になります(年も変わってくれます)。
しかし、例えば、今日が 5月31日だった場合、myDate.setMonth(3) のように月を変更すると、 4月は30日までしかないので、4月31日→5月1日に修正してくれます。

これでは都合が悪いので月を変更する前に日を 1日に変更しています。
myDate.setDate(1);
myMonth = myMonth + myTodayOffset;
myDate.setMonth(myMonth);

前回の Step のサンプルでは、今日を水色に変更していました。
if ( myDat == myToday ){
このままだと、すべての月の「今日」が水色になってしまうので、
if ( myDat == myToday && myTodayOffset == 0 ){
のように、パラメータの値が 0、つまり、今月のみの条件を追加しています。

あと、前回の Step では、気を利かして、行数を計算しました。
しかし、今回は３ヶ月分表示するので、月によって行が変わるとバランスが悪くなります。
今回は行数計算を省いて、６行固定にしました。

これで、変更終了です。

参考ステップ
Step.21 TABLEタグを JavaScriptで作成してみましょう　
Step.22 月間カレンダーに挑戦してみましょう　

▲TOP

実行例

リスト

説明