teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

9

タイトルの変更

2019/02/12 04:35

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
@@ -1,1 +1,1 @@
1
- Javascript: カレンダーに関する繰り返し処理について
1
+ Javascript: カレンダーに関する繰り返し処理について(休みを設けるプログラム)
body CHANGED
File without changes

8

タイトルの変更

2019/02/12 04:35

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
@@ -1,1 +1,1 @@
1
- Javascript: for文の繰り返し処理がうまく出来な
1
+ Javascript: カレンダーに関する繰り返し処理につ
body CHANGED
File without changes

7

質問内容を綺麗にまとめました。

2019/02/12 04:34

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -60,7 +60,9 @@
60
60
  ```
61
61
 
62
62
  ### 補足情報(FW/ツールのバージョンなど)
63
-
63
+ 以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
64
+ [以前の質問](https://teratail.com/questions/172721)
65
+ [リンク先でコードを動かすことができます](https://jsfiddle.net/wm6r921d/7/)
64
66
  ```JavaScript```
65
67
 
66
68
  ### 追記

6

訂正

2019/02/12 02:54

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -60,9 +60,7 @@
60
60
  ```
61
61
 
62
62
  ### 補足情報(FW/ツールのバージョンなど)
63
- 以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
63
+
64
- [以前の質問](https://teratail.com/questions/172721)
65
- [リンク先でコードを動かすことができます](https://jsfiddle.net/wm6r921d/7/)
66
64
  ```JavaScript```
67
65
 
68
66
  ### 追記
@@ -89,171 +87,4 @@
89
87
  "2019-01-22T08:00","2019-01-22T08:30","2019-01-22T09:00","2019-22-01T09:30","2019-01-22T10:00"
90
88
  **5週目**
91
89
  ...etc
92
- ]
90
+ ]
93
-
94
- ```
95
- ```js
96
- {
97
- const
98
- day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
99
- day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
100
- doc = document;
101
-
102
- const
103
- A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
104
- B = (d, n) => d.setDate (d.getDate () + n),
105
- C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
106
- D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'),
107
- E = (e, d) => {
108
- let
109
- [a,,b] = A (e, 'label', 'br', 'label'),
110
- w = d.getDay () ;
111
- a.textContent = d.getDate ();
112
- b.textContent = day_jname[w];
113
- e.classList.add (day_name[w]);
114
- },
115
- F = d => {
116
- let m = d.getMonth ();
117
- return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
118
- (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
119
- },
120
- G = ary => ary.reduce ((a, b) => {
121
- let
122
- c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
123
- d = D (c);
124
- if (! (d in a)) a[d] = [];
125
- a[d][F(c)] = true;
126
- return a;
127
- }, { })
128
- ,
129
- H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
130
- I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':')
131
- ;
132
-
133
-
134
- class Shedule {
135
- constructor (date = new Date, range = 7, plan = []) {
136
- this.current = H (date);
137
- this.date = H (date);
138
- this.range = range;
139
- this.plan = G (plan);
140
- this.table = document.createElement ('table');
141
-
142
- this.remake ();
143
- }
144
-
145
-
146
- add (day = this.range) {
147
- let d = H (this.current);
148
- d.setDate (d.getDate () + day);
149
- if (+this.date <= +d) {
150
- this.current = d;
151
- this.remake ();
152
- }
153
- }
154
-
155
-
156
- remake () {
157
- this.prev_btn = this.next_btn = null;
158
- let t = this.table;
159
- [...t.childNodes].forEach (e => e.remove ());
160
-
161
- let
162
- h = t.createTHead (),
163
- tr0 = h.insertRow (-1),
164
- tr1 = h.insertRow (-1),
165
- d = H (this.current),
166
- s = tr0.insertCell (-1),
167
- c = 1,
168
- m = d.getMonth ();
169
-
170
- for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
171
- let td = tr1.insertCell (-1);
172
- if (m !== d.getMonth ()) {
173
- s.colSpan = c - 1;
174
- s = tr0.insertCell (-1);
175
- m = d.getMonth ();
176
- c = 1;
177
- }
178
- s.textContent = C (d);
179
- E (td, d);
180
- }
181
- s.colSpan = c - 1;
182
-
183
- let e = tr0.insertCell (0);
184
- e.textContent = '前の一週間';
185
- e.classList.add ('button');
186
- e.rowSpan = 2;
187
- this.prev_btn = e;
188
-
189
- e = tr0.insertCell (-1);
190
- e.textContent = '次の一週間';
191
- e.classList.add ('button');
192
- e.rowSpan = 2;
193
- this.next_btn = e;
194
-
195
- //start--時間の時と分の分割処理
196
- var name_start = document.getElementById('sample').value;
197
-
198
- var result = name_start.substr( 0, 2 );
199
- var result2 = name_start.substr( 3, 4 );
200
-
201
- var hour_start = result, minutes_start = result2;
202
- //---end
203
-
204
- //finish
205
- var name_finish = document.getElementById('sample2').value;
206
-
207
- var result_finish = name_finish.substr( 0, 2 );
208
- var result2_finish = name_finish.substr( 3, 4 );
209
-
210
- var hour_end = result_finish, minutes_end = result2_finish;
211
-
212
- //---end
213
- let
214
- begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。
215
- end = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間 //ここをどうにかしたい
216
- step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
217
- o = F (this.current),
218
- rst = [ ];
219
-
220
- for (let d = begin; d < end; d = new Date (+step + (+d))) {
221
- let
222
- a = new Array (this.rangi),
223
- b = I (d),
224
- c = this.plan[b] || [];
225
-
226
- for (let i = 0; i < this.range; i++)
227
- a[i] = c[o + i] ? '-' : '◎';
228
-
229
- rst.push ([b, ...a, b]);
230
- }
231
-
232
- let [tb] = A (t, 'tbody');
233
- rst.forEach (r => {
234
- let tr = tb.insertRow (-1);
235
- r.forEach (c => tr.insertCell (-1).textContent = c)
236
- });
237
-
238
- }
239
-
240
- handleEvent ({target: t}) {
241
- if (t === this.prev_btn) this.add (-this.range);
242
- if (t === this.next_btn) this.add (this.range);
243
- }
244
-
245
- }
246
-
247
- this.Shedule = Shedule;
248
- }
249
- const BUSY = [
250
- '2019-02-12T10:00',
251
- '2019-02-09T23:30'
252
- ];
253
-
254
-
255
- let a = new Shedule (new Date, 14, BUSY), {table: b} = a;
256
- document.querySelector ('#calendar').appendChild (b);
257
- b.addEventListener ('click', a, false);
258
- ```
259
- ```

5

リンクの追記

2019/02/12 02:49

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -62,7 +62,7 @@
62
62
  ### 補足情報(FW/ツールのバージョンなど)
63
63
  以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
64
64
  [以前の質問](https://teratail.com/questions/172721)
65
- [リンク先でコードを動かすことができます](<div id="calendar"></div>)
65
+ [リンク先でコードを動かすことができます](https://jsfiddle.net/wm6r921d/7/)
66
66
  ```JavaScript```
67
67
 
68
68
  ### 追記

4

コードの追記

2019/02/11 15:33

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -62,6 +62,7 @@
62
62
  ### 補足情報(FW/ツールのバージョンなど)
63
63
  以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
64
64
  [以前の質問](https://teratail.com/questions/172721)
65
+ [リンク先でコードを動かすことができます](<div id="calendar"></div>)
65
66
  ```JavaScript```
66
67
 
67
68
  ### 追記

3

コードの追記

2019/02/11 15:32

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -90,7 +90,8 @@
90
90
  ...etc
91
91
  ]
92
92
 
93
+ ```
93
- ```Javascript
94
+ ```js
94
95
  {
95
96
  const
96
97
  day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
@@ -253,4 +254,5 @@
253
254
  let a = new Shedule (new Date, 14, BUSY), {table: b} = a;
254
255
  document.querySelector ('#calendar').appendChild (b);
255
256
  b.addEventListener ('click', a, false);
257
+ ```
256
258
  ```

2

コードの追記

2019/02/11 14:50

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -88,4 +88,169 @@
88
88
  "2019-01-22T08:00","2019-01-22T08:30","2019-01-22T09:00","2019-22-01T09:30","2019-01-22T10:00"
89
89
  **5週目**
90
90
  ...etc
91
- ]
91
+ ]
92
+
93
+ ```Javascript
94
+ {
95
+ const
96
+ day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
97
+ day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
98
+ doc = document;
99
+
100
+ const
101
+ A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
102
+ B = (d, n) => d.setDate (d.getDate () + n),
103
+ C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
104
+ D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'),
105
+ E = (e, d) => {
106
+ let
107
+ [a,,b] = A (e, 'label', 'br', 'label'),
108
+ w = d.getDay () ;
109
+ a.textContent = d.getDate ();
110
+ b.textContent = day_jname[w];
111
+ e.classList.add (day_name[w]);
112
+ },
113
+ F = d => {
114
+ let m = d.getMonth ();
115
+ return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
116
+ (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
117
+ },
118
+ G = ary => ary.reduce ((a, b) => {
119
+ let
120
+ c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
121
+ d = D (c);
122
+ if (! (d in a)) a[d] = [];
123
+ a[d][F(c)] = true;
124
+ return a;
125
+ }, { })
126
+ ,
127
+ H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
128
+ I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':')
129
+ ;
130
+
131
+
132
+ class Shedule {
133
+ constructor (date = new Date, range = 7, plan = []) {
134
+ this.current = H (date);
135
+ this.date = H (date);
136
+ this.range = range;
137
+ this.plan = G (plan);
138
+ this.table = document.createElement ('table');
139
+
140
+ this.remake ();
141
+ }
142
+
143
+
144
+ add (day = this.range) {
145
+ let d = H (this.current);
146
+ d.setDate (d.getDate () + day);
147
+ if (+this.date <= +d) {
148
+ this.current = d;
149
+ this.remake ();
150
+ }
151
+ }
152
+
153
+
154
+ remake () {
155
+ this.prev_btn = this.next_btn = null;
156
+ let t = this.table;
157
+ [...t.childNodes].forEach (e => e.remove ());
158
+
159
+ let
160
+ h = t.createTHead (),
161
+ tr0 = h.insertRow (-1),
162
+ tr1 = h.insertRow (-1),
163
+ d = H (this.current),
164
+ s = tr0.insertCell (-1),
165
+ c = 1,
166
+ m = d.getMonth ();
167
+
168
+ for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
169
+ let td = tr1.insertCell (-1);
170
+ if (m !== d.getMonth ()) {
171
+ s.colSpan = c - 1;
172
+ s = tr0.insertCell (-1);
173
+ m = d.getMonth ();
174
+ c = 1;
175
+ }
176
+ s.textContent = C (d);
177
+ E (td, d);
178
+ }
179
+ s.colSpan = c - 1;
180
+
181
+ let e = tr0.insertCell (0);
182
+ e.textContent = '前の一週間';
183
+ e.classList.add ('button');
184
+ e.rowSpan = 2;
185
+ this.prev_btn = e;
186
+
187
+ e = tr0.insertCell (-1);
188
+ e.textContent = '次の一週間';
189
+ e.classList.add ('button');
190
+ e.rowSpan = 2;
191
+ this.next_btn = e;
192
+
193
+ //start--時間の時と分の分割処理
194
+ var name_start = document.getElementById('sample').value;
195
+
196
+ var result = name_start.substr( 0, 2 );
197
+ var result2 = name_start.substr( 3, 4 );
198
+
199
+ var hour_start = result, minutes_start = result2;
200
+ //---end
201
+
202
+ //finish
203
+ var name_finish = document.getElementById('sample2').value;
204
+
205
+ var result_finish = name_finish.substr( 0, 2 );
206
+ var result2_finish = name_finish.substr( 3, 4 );
207
+
208
+ var hour_end = result_finish, minutes_end = result2_finish;
209
+
210
+ //---end
211
+ let
212
+ begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。
213
+ end = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間 //ここをどうにかしたい
214
+ step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
215
+ o = F (this.current),
216
+ rst = [ ];
217
+
218
+ for (let d = begin; d < end; d = new Date (+step + (+d))) {
219
+ let
220
+ a = new Array (this.rangi),
221
+ b = I (d),
222
+ c = this.plan[b] || [];
223
+
224
+ for (let i = 0; i < this.range; i++)
225
+ a[i] = c[o + i] ? '-' : '◎';
226
+
227
+ rst.push ([b, ...a, b]);
228
+ }
229
+
230
+ let [tb] = A (t, 'tbody');
231
+ rst.forEach (r => {
232
+ let tr = tb.insertRow (-1);
233
+ r.forEach (c => tr.insertCell (-1).textContent = c)
234
+ });
235
+
236
+ }
237
+
238
+ handleEvent ({target: t}) {
239
+ if (t === this.prev_btn) this.add (-this.range);
240
+ if (t === this.next_btn) this.add (this.range);
241
+ }
242
+
243
+ }
244
+
245
+ this.Shedule = Shedule;
246
+ }
247
+ const BUSY = [
248
+ '2019-02-12T10:00',
249
+ '2019-02-09T23:30'
250
+ ];
251
+
252
+
253
+ let a = new Shedule (new Date, 14, BUSY), {table: b} = a;
254
+ document.querySelector ('#calendar').appendChild (b);
255
+ b.addEventListener ('click', a, false);
256
+ ```

1

質問の補足

2019/02/11 14:48

投稿

rails_ruby
rails_ruby

スコア87

title CHANGED
File without changes
body CHANGED
@@ -31,8 +31,8 @@
31
31
  ### 該当のソースコード
32
32
  ```html
33
33
  <input type="date" value="2019-01-01" id="dates"> <!-- 火曜日 -->
34
- <input type="time" value="00:00" id="time_start">
34
+ <input type="time" value="08:00" id="time_start"> <!-- 変更前: 00:00-->
35
- <input type="time" value="23:30" id="time_finish">
35
+ <input type="time" value="10:00" id="time_finish"><!-- 変更前: 23:30 -->
36
36
  ```
37
37
 
38
38
  ```js
@@ -60,5 +60,32 @@
60
60
  ```
61
61
 
62
62
  ### 補足情報(FW/ツールのバージョンなど)
63
+ 以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
63
64
  [以前の質問](https://teratail.com/questions/172721)
64
- ```JavaScript```
65
+ ```JavaScript```
66
+
67
+ ### 追記
68
+ 文字数の制約上、実際の処理に関わる部分のみを抜粋しています。
69
+ (練習で色々な処理を試しているので現在のコードがぐちゃぐちゃで載せるに載せないのも理由の一つです...)
70
+
71
+ **forを使わないときの処理内容**
72
+ d0,t1,t2の変数において、querySelectorを用いてinputのvalueを取得しています。
73
+ 取得した、valueを変数d1,d2でdateとtimeを結合?しています。
74
+ そしてmではtime_startからtime_finishまでの時間帯を30分おきに配列にしています。
75
+ そして、本質問内にはありませんが定数BUSYにpushしています。
76
+ console.logで見ると下記のようになります。
77
+ ### コンソール
78
+ ["2019-01-01T08:00","2019-01-01T08:30","2019-01-01T09:00","2019-01-01T09:30","2019-01-01T10:00"]
79
+
80
+ ### for文を使った場合 ← ここを実現したいです。
81
+ **1週目**
82
+ ["2019-01-01T08:00","2019-01-01T08:30","2019-01-01T09:00","2019-01-01T09:30","2019-01-01T10:00",
83
+ **2週目**
84
+ "2019-01-08T08:00","2019-01-08T08:30","2019-01-08T09:00","2019-01-08T09:30","2019-01-08T10:00",
85
+ **3週目**
86
+ "2019-01-15T08:00","2019-01-15T08:30","2019-01-15T09:00","2019-01-15T09:30","2019-01-15T10:00",
87
+ **4週目**
88
+ "2019-01-22T08:00","2019-01-22T08:30","2019-01-22T09:00","2019-22-01T09:30","2019-01-22T10:00"
89
+ **5週目**
90
+ ...etc
91
+ ]