ポイントは、「その年月のカレンダーのその日は第何週なのか、第何曜日なのか、何日なのか」をJavaScriptで生成し、祝祭日はCSSで指定していること。
サンプル：Javascriptでカレンダーを作ってみた（基本）
- html
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> 下記CSS </style> </head> <body> <script type="text/javascript"> 下記JavaScript </script> </body> </html> - CSS
-
.month1 .date1, /* 元日 */ .month1 .mon2, /* 成人の日 */ .month2 .date11, /* 建国記念の日 */ .month4 .date29, /* 昭和の日 */ .month5 .date3, /* 憲法記念日 */ .month5 .date4, /* みどりの日 */ .month5 .date5, /* こども日 */ .month7 .mon3, /* 海の日 */ .month9 .mon3, /* 敬老の日 */ .month10 .mon2, /* 体育の日 */ .month11 .date3, /* 文化の日 */ .month11 .date23, /* 勤労感謝の日 */ .month12 .date23, /* 天皇誕生日 */ #d20110321, /* 春分の日（年によって異なる 20日 - 21日） */ #d20110923, /* 秋分の日（年によって異なる 20日 - 24日） */ .sun1, .sun2, .sun3, .sun4, .sun5 { background:#F9C; color:#fff; } - JavaScript
-
// 取得したい年月設定（とりあえずPC時間の今日の年月） var y = new Date().getFullYear(); var m = new Date().getMonth()+1; // 初期設定 var feb_date = (y%4 == 0 && y%100 != 0)? 29: 28; if (y%400 == 0) {feb_date = 29;}; var month_count = {1:31, 2:feb_date, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31}; var day_en = {d0:"sun", d1:"mon", d2:"the", d3:"wed", d4:"thu", d5:"fri", d6:"sat"}; var m_display = (m<10)? "0"+String(m): m; var last_day = new Date(y,m-1,month_count[m]).getDay(); var first_day = new Date(y,m-1,1).getDay(); var w = 1; var d = first_day; // マークアップ生成 var txt = ""; txt += '<h1>' + y + '年' + m_display + '月のカレンダー</h1>'; txt += '<table summary="' + y + '年' + m_display + '月のカレンダー" class="calendar month' + m + '">'; txt += '<tr>'; txt += '<th>SUN</th>'; txt += '<th>MON</th>'; txt += '<th>TUE</th>'; txt += '<th>WED</th>'; txt += '<th>THU</th>'; txt += '<th>FRI</th>'; txt += '<th>SAT</th>'; txt += '</tr>'; txt += '<tr class="week1">'; for(var j=0;j<first_day;j++){ txt += '<td> </td>'; } for (var i=1; i<=month_count[m]; i++) { if (d != 0 && (first_day + i)%7 == 1) { w++; d = 0; txt += '</tr>'; txt += '<tr class="week' + w + '">'; } var i_display = (i<10)? "0"+String(i): i; day_count = (i%7 == 0)? Math.floor(i/7): Math.floor(i/7)+1; txt += '<td id="d' + y + m_display + i_display + '" class="' + day_en['d'+d] + day_count + ' date' + i + '">' + i + '</td>'; d++; } for (var j=0; j<(6-last_day); j++) { txt += '<td> </td>\n'; } txt += '</tr>'; txt += '</table>'; // 書き出し document.write(txt);
JavaScriptの流れ
- 取得したい年月の設定
var y = new Date().getFullYear(); var m = new Date().getMonth()+1; - その年月の日数を設定
// 閏年チェック var feb_date = (y%4 == 0 && y%100 != 0)? 29: 28; if (y%400 == 0){feb_date = 29}; var month_count = {1:31, 2:feb_date, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31} - 曜日の文字列設定
var day_en = {d0:"sun", d1:"mon", d2:"the", d3:"wed", d4:"thu", d5:"fri", d6:"sat"}; - 月の0付き表示設定（例：1月であれば「01」）
var i_display = (i<10)? "0"+String(i): i; - その年月の最終日は何曜日かを設定
var last_day = new Date(y,m-1,month_count[m]).getDay(); - その年月の1日は何曜日か、第1週目で、1日であることを設定
var first_day = new Date(y,m-1,1).getDay(); var w = 1; var d = first_day; - マークアップ生成
・・・ txt += '<tr class="week1">'; //その年月の1日がはじまる曜日までの空白セル生成 for (var j=0; j<first_day; j++){ txt += '<td> </td>'; } //その年月の日数分ループ処理 for (var i=1; i<=month_count[m]; i++){ //土曜日と日曜日の間の処理 if (d != 0 && (first_day + i)%7 == 1) { w++; //第何週か d = 0; //曜日、日曜にリセット txt += '</tr>'; txt += '<tr class="week' + w + '">'; } //日の0付き表示設定（例：1日であれば「01」） var i_display = (i<10)?"0"+String(i):i; day_count = (i%7 == 0)? Math.floor(i/7) : Math.floor(i/7) + 1 ; txt += '<td id="d' + y + m_display + i_display + '" class="' + day_en['d'+d] + day_count + ' date' + i + '">' + i + '</td>'; //表示例：<td id="d20110801" class="mon1 date1">1</td> id属性値は西暦からはじまるユニーク、class属性値は、第何曜日かと日付を指定。 d++; } //その年月の最終日以降の空白セル生成 for (var j=0; j<(6-last_day); j++) { txt += '<td> </td>'; } txt += '</tr>'; ・・・
やってみて
サンプル：Javascriptでカレンダーを作ってみた（基本）
もし振替休日とかに対応しようとしたら、すべてJavascriptで処理し、祭日にholidayとかclass名追加してやったほうがいいかも
これを踏まえて、イベントカレンダーなるもの作ってみようかと思いますー