Javascript でカレンダーを出力したいと思ったら既にありました。
JavaScript: カレンダー
祝日を自動的に出力するのは難しいですが、出力する段階で今月のいつが祝日かを入れることで、祝日に class=”holiday” を付加できるようにコードを少し書き換えました。
また、土曜日には class=”sat” 日曜日には class=”sun” と付くようになっています。
使い方
8日と9日が祝日の場合は、以下のように配列にデータを格納し、引数に入れ、適当な場所にこのコードを埋め込めば、そこにカレンダーが出力されます。
1 2 3 4 | <script type="text/javascript"> var array = new Array(8, 9); document.write(cal(array)); </script> |
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | function cal(holiday, year, month, day) { today = new Date(); if(holiday) { var holidayNo = true; } else { var holidayNo = false; } if(!year) var year = today.getFullYear(); if(!month) { var month = today.getMonth(); } else { month--; } if(!day) var day = today.getDate(); var leap_year = false; if((year%4 == 0 && year%100 != 0) || (year%400 == 0)) leap_year = true; lom = new Array(31, 28+leap_year, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); dow = new Array("日", "月", "火", "水", "木", "金", "土"); var days = 0; for(var i=0; i < month; i++) days+=lom[i]; var week = Math.floor((year * 365.2425 + days) % 7); var j = 0; var h = 0; var hol = false; var when = year + "年 " + (month + 1) + "月"; var calendar = "<table summary=\"" + when + "のカレンダー\">\n"; calendar += "<caption>" + when + "<\/caption>\n<tr>"; for(i=0; i < 7; i++) calendar += "<th>" + dow[i] + "<\/th>"; calendar+="<\/tr>\n<tr>"; for(i=0; i < week; i++,j++) calendar += "<td><\/td>"; for(i=1; i <= lom[month]; i++) { calendar+="<td"; if(holidayNo) { for(h = 0; h < holiday.length; h++) { if(i == holiday[h]) { hol = true; break; } } } if(day == i) { calendar += " class=\"today\""; } else if(hol) { calendar += " class=\"holiday\""; hol = false; } else if(j == 0) { calendar += " class=\"sun\""; } else if(j == 6) { calendar += " class=\"sat\""; } if(hol) hol = false; calendar+=">" + i + "<\/td>"; j++; if (j > 6) { calendar += "<\/tr>\n<tr>"; j=0; } } for(i=j; i > 6; i++) calendar += "<td><\/td>"; calendar += "<\/tr>\n<\/table>\n"; return calendar; } |
Amenti さんありがとう!
コメント