Javascript で祝日を手動で設定できるカレンダーを出力するコード

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 さんありがとう!

コメント

コメントは受け付けていません。