teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptのカレンダーのif文によるエラー

編集履歴

回答編集履歴

1

修正

2019/06/05 21:31

投稿

退会済みユーザー
test CHANGED
@@ -8,13 +8,9 @@
8
8
 
9
9
  WEEK_JP = ['日', '月', '火', '水', '木', '金', '土'],
10
10
 
11
+ WEEK_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
12
+
11
- DATE_FN = ['getFullYear', 'getMonth', 'getDate', 'getDay'],
13
+ DATE_FN = ['getFullYear', 'getMonth', 'getDate', 'getDay'];
12
-
13
- OPTION = {
14
-
15
-
16
-
17
- };
18
14
 
19
15
 
20
16
 
@@ -22,8 +18,6 @@
22
18
 
23
19
  dt.setMonth (dt.getMonth () + n);
24
20
 
25
- return dt;
26
-
27
21
  }
28
22
 
29
23
 
@@ -36,6 +30,14 @@
36
30
 
37
31
 
38
32
 
33
+ function isSameDate (a, b) {
34
+
35
+ return DATE_FN.every (f => a[f]() === b[f]());
36
+
37
+ }
38
+
39
+
40
+
39
41
  function getDTValue (dt = new Date) {
40
42
 
41
43
  return DATE_FN.map (f => dt[f]());
@@ -44,45 +46,29 @@
44
46
 
45
47
 
46
48
 
47
- function getGetumatu (dt) {
48
-
49
-
50
-
51
- }
52
-
53
-
54
-
55
- function removeChild (e) {
56
-
57
- e.remove ();
58
-
59
- }
60
-
61
-
62
-
63
49
  //____________________
64
50
 
65
51
 
66
52
 
67
- function init () {
53
+ function init (e) {
68
54
 
69
55
  let
70
56
 
71
- doc = this.parent.ownerDocument,
57
+ doc = e.ownerDocument,
72
58
 
73
59
  tbl = doc.createElement ('table'),
74
60
 
61
+ cap = tbl.createCaption (),
62
+
75
63
  thd = tbl.createTHead (),
76
64
 
77
- tr = thd.insertRow ();
65
+ tr = thd.insertRow ();
78
-
79
-
80
-
81
- tbl.createCaption ();
66
+
67
+
82
68
 
83
69
  WEEK_JP.forEach (w => tr.insertCell ().textContent = w);
84
70
 
85
- this.table = this.parent.appendChild (tbl);
71
+ return e.appendChild (tbl);
86
72
 
87
73
  }
88
74
 
@@ -94,15 +80,21 @@
94
80
 
95
81
  class Calendar {
96
82
 
83
+
84
+
97
- constructor (parent, dateObj = new Date, option = {}) {
85
+ constructor (parent, dt = new Date) {
86
+
87
+ if (1 > arguments.length)
88
+
89
+ throw new Error ('引数が不足');
90
+
91
+
92
+
93
+ this.table = init (parent);
98
94
 
99
95
  this.parent = parent;
100
96
 
101
- this.current = dateObj;
97
+ this.current = dt;
102
-
103
- this.option = Object.assign ({}, OPTION, option);
104
-
105
- init.call (this);
106
98
 
107
99
  this.show ();
108
100
 
@@ -110,79 +102,89 @@
110
102
 
111
103
 
112
104
 
105
+
106
+
113
107
  show () {
114
108
 
115
109
  let
116
110
 
117
- tbodies = [...this.table.tBodies],
111
+ tbodies = this.table.tBodies,
118
112
 
119
113
  tbody = this.parent.ownerDocument.createElement ('tbody'),
120
114
 
115
+ today = new Date,//今日
116
+
121
- [year, month] = getDTValue (this.current),
117
+ [Y, M] = getDTValue (this.current),//Classが持つ基準のDATE
122
-
118
+
123
- current = new Date (year, month + 1, 0),
119
+ current = new Date (Y, M + 1, 0),//月末
124
-
120
+
125
- [cy, cm, cd, cw] = getDTValue (current),//対象の月末
121
+ [cy, cm, cd, cw] = getDTValue (current),//月末の詳細
126
-
122
+
127
- n0 = (7 + cw - cd % 7) % 7 + cd,
123
+ n0 = (7 + cw - cd % 7) % 7 + cd,//カレンダーに描く最初の日までの日数を求める
128
-
124
+
129
- n1 = n0 + (7 - cw);//月のカレンダーに何日必要なのか
125
+ n1 = n0 + 7 - cw,//カレンダーに表示する日数を求める
130
-
131
-
132
-
133
- let tmp = Shukujitu.getHolidayList (year, month);
126
+
134
-
135
- let hday = tmp ? new Map (tmp.map (dt => [dt.date.getDate (), dt])): new Map;
127
+ holiday = new Map (Shukujitu.getHolidayList (Y, M).map (dt=> [dt.date.getDate (), dt]) || []),
136
-
137
-
138
-
128
+
139
- addDay (current, -n0);
129
+ tr, td;
140
-
130
+
131
+
132
+
141
- tbodies.forEach (removeChild);
133
+ Array.from (tbodies, e => e.remove ());//tbody 要素群をいったん削除
142
-
134
+
143
- this.table.caption.textContent = [cy, cm + 1].join (' / ');
135
+ this.table.caption.textContent = [Y, M + 1].join (' / ');//caption要素に代入
144
136
 
145
137
 
146
138
 
147
- let tr, td;
139
+ addDay (current, -n0);//基準を最初の日にする
148
140
 
149
141
  for (let i = 0; i < n1; i++) {
150
142
 
143
+ let
144
+
151
- let [y, m, d] = getDTValue (current);
145
+ [, m, d, w] = getDTValue (current),
146
+
152
-
147
+ cname = [WEEK_EN[w]];//className
153
-
154
-
148
+
149
+
150
+
155
- if (! (i % 7))
151
+ if (! w)
156
-
152
+
157
- tr = tbody.insertRow (-1);
153
+ tr = tbody.insertRow (-1);//日曜なら行を作る
158
154
 
159
155
 
160
156
 
161
157
  td = tr.insertCell (-1);
162
158
 
159
+
160
+
161
+ if (isSameDate (today, current))
162
+
163
+ cname.push ('today');
164
+
163
- if (month != m)
165
+ if (M != m)
164
-
166
+
165
- td.classList.add ('disabled');
167
+ cname.push ('disabled');
166
-
168
+
167
- else if (hday.has (d)) {
169
+ else if (holiday.has (d)) {
168
-
170
+
169
- td.classList.add ('holiday');
171
+ cname.push ('holiday');
170
-
172
+
171
- td.title = hday.get (d).name;
173
+ td.title = holiday.get (d).name;
172
174
 
173
175
  }
174
176
 
175
177
 
176
178
 
177
-
179
+ td.classList.add (...cname);
178
180
 
179
181
  td.textContent = d;
180
182
 
181
- td.dataset.date = [y, m + 1, d].join ('-');
183
+ td.dataset.date = [Y, M + 1, d].join ('-');
182
-
183
-
184
-
184
+
185
+
186
+
185
- addDay (current, 1);
187
+ addDay (current, 1);//inc
186
188
 
187
189
  }
188
190
 
@@ -242,34 +244,8 @@
242
244
 
243
245
 
244
246
 
245
- //______________________________
246
-
247
- //２つ目
248
-
249
- const calendar2 = new Calendar (fuga, new Date (2020, 7, 1));
250
-
251
- calendar2.handleEvent = function (event) {
252
-
253
- switch (event.target) {
254
-
255
- case prev2: this.next (-1); break;
256
-
257
- case next2: this.next (1); break;
258
-
259
- }
260
-
261
- };
262
-
263
-
264
-
265
- document.addEventListener ('click', calendar2, false);
266
-
267
-
268
-
269
247
  </script>
270
248
 
271
249
 
272
250
 
273
-
274
-
275
251
  ```