回答編集履歴

2

全体を書き直した版のコードも追記

2019/10/05 07:02

投稿

tanishi_a
tanishi_a

スコア484

test CHANGED
@@ -36,9 +36,15 @@
36
36
 
37
37
 
38
38
 
39
- ただ他の人も仰ってる通り、メンテがつらいコードですね・・。
39
+ あと本質と関係ないですが、
40
40
 
41
41
 
42
+
43
+ - 綴り間違い: `calender` → `calendar`
44
+
45
+ - 変数名 `holiday` は配列なので `holidays` のほうが統一感がある
46
+
47
+ - 変数名の `xxx_date` が、日付を指している場合と曜日を指している場合とが混在していて分かりづらい
42
48
 
43
49
 
44
50
 
@@ -46,6 +52,80 @@
46
52
 
47
53
 
48
54
 
49
- あと本質と関係なです、 calender → calendar です。
55
+ ただ他の人も仰ってる通り、メンテつらいコードですね・・
50
56
 
57
+
58
+
51
- エディタで検索て引っからくてあれ?なりました。
59
+ 直すとたらこうかな思って書いてみましたが、これはこれで・・
60
+
61
+
62
+
63
+ ```JavaScript
64
+
65
+ function formatDate(d) {
66
+
67
+ return d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
68
+
69
+ }
70
+
71
+ function createCalendar() {
72
+
73
+ const calendarTable = document.getElementById('calendarTable');
74
+
75
+ const now = new Date();
76
+
77
+ const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
78
+
79
+ const beginningOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
80
+
81
+ const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
82
+
83
+
84
+
85
+ let holidays = [
86
+
87
+ '2019/10/14',
88
+
89
+ '2019/10/22',
90
+
91
+ ];
92
+
93
+
94
+
95
+ const datesTable = [];
96
+
97
+ for (let week = -1, date = beginningOfMonth; date <= endOfMonth; date = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)) {
98
+
99
+ const dayOfWeek = date.getDay();
100
+
101
+ if (datesTable.length === 0 || dayOfWeek === 0) {
102
+
103
+ datesTable.push(new Array(7).fill('<td></td>'));
104
+
105
+ week += 1;
106
+
107
+ }
108
+
109
+ const style = holidays.includes(formatDate(date)) ? 'background-color: pink;' : '';
110
+
111
+ datesTable[week][dayOfWeek] = `<td style="${style}">${date.getDate()}</td>`;
112
+
113
+ }
114
+
115
+ let html = '';
116
+
117
+ for (const row of datesTable) {
118
+
119
+ const tr = calendarTable.insertRow(-1);
120
+
121
+ for (const cell of row) {
122
+
123
+ tr.innerHTML += cell;
124
+
125
+ }
126
+
127
+ }
128
+
129
+ }
130
+
131
+ ```

1

文字色ではなく背景色でしたね。訂正

2019/10/05 07:01

投稿

tanishi_a
tanishi_a

スコア484

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  if (holiday.includes(date)) {
24
24
 
25
- return '<td style="color: red;">' + date + '</td>';
25
+ return '<td style="background-color: pink;">' + date + '</td>';
26
26
 
27
27
  }
28
28