トップに関する質問 Javascript: カレンダーに関する繰り返し処理について(休みを設けるプログラム)

編集履歴

質問編集履歴

タイトルの変更

2019/02/12 04:35

投稿

rails_ruby

スコア87

test CHANGED Viewed

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

test CHANGED Viewed

File without changes

タイトルの変更

2019/02/12 04:35

投稿

rails_ruby

スコア87

test CHANGED Viewed

	@@ -1 +1 @@
1	- Javascript: ~~for文の~~繰り返し処理~~がうまく出来な~~い。
1	+ Javascript: カレンダーに関する繰り返し処理について

test CHANGED Viewed

File without changes

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

2019/02/12 04:34

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -122,7 +122,11 @@
 ### 補足情報（FW/ツールのバージョンなど）
+以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
+[以前の質問](https://teratail.com/questions/172721)
+[リンク先でコードを動かすことができます](https://jsfiddle.net/wm6r921d/7/)
 ```JavaScript```

訂正

2019/02/12 02:54

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -122,11 +122,7 @@
 ### 補足情報（FW/ツールのバージョンなど）
-以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
-[以前の質問](https://teratail.com/questions/172721)
-[リンク先でコードを動かすことができます](https://jsfiddle.net/wm6r921d/7/)
 ```JavaScript```
@@ -181,337 +177,3 @@
 ...etc
 ]
-```
-```js
-{
-  const
-    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
-    day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
-    doc = document;
-  const
-    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
-    B = (d, n) => d.setDate (d.getDate () + n),
-    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
-    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'),
-    E = (e, d) => {
-      let
-        [a,,b] = A (e, 'label', 'br', 'label'),
-        w = d.getDay () ;
-      a.textContent = d.getDate ();
-      b.textContent = day_jname[w];
-      e.classList.add (day_name[w]);
-    },
-    F = d => {
-      let m = d.getMonth ();
-      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
-      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
-    },
-    G = ary => ary.reduce ((a, b) => {
-        let
-          c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
-          d = D (c);
-        if (! (d in a)) a[d] = [];
-        a[d][F(c)] = true;
-        return a;
-      }, { })
-    ,
-    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
-    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':')
-    ;
-  class Shedule {
-    constructor (date = new Date, range = 7, plan = []) {
-      this.current = H (date);
-      this.date = H (date);
-      this.range = range;
-      this.plan = G (plan);
-      this.table = document.createElement ('table');
-      this.remake ();
-    }
-    add (day = this.range) {
-      let d = H (this.current);
-      d.setDate (d.getDate () + day);
-      if (+this.date <= +d) {
-        this.current = d;
-        this.remake ();
-      }
-    }
-    remake () {
-      this.prev_btn = this.next_btn = null;
-      let t = this.table;
-      [...t.childNodes].forEach (e => e.remove ());
-      let
-        h = t.createTHead (),
-        tr0 = h.insertRow (-1),
-        tr1 = h.insertRow (-1),
-        d = H (this.current),
-        s = tr0.insertCell (-1),
-        c = 1,
-        m = d.getMonth ();
-      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
-        let td = tr1.insertCell (-1);
-        if (m !== d.getMonth ()) {
-          s.colSpan = c - 1;
-          s = tr0.insertCell (-1);
-          m = d.getMonth ();
-          c = 1;
-        }
-        s.textContent = C (d);
-        E (td, d);
-      }
-      s.colSpan = c - 1;
-      let e = tr0.insertCell (0);
-      e.textContent = '前の一週間';
-      e.classList.add ('button');
-      e.rowSpan = 2;
-      this.prev_btn = e;
-      e = tr0.insertCell (-1);
-      e.textContent = '次の一週間';
-      e.classList.add ('button');
-      e.rowSpan = 2;
-      this.next_btn = e;
-      //start--時間の時と分の分割処理
-      var name_start = document.getElementById('sample').value;
-      var result = name_start.substr( 0, 2 );
-      var result2 = name_start.substr( 3, 4 );
-      var hour_start = result, minutes_start = result2;
-      //---end
-      //finish
-      var name_finish = document.getElementById('sample2').value;
-      var result_finish = name_finish.substr( 0, 2 );
-      var result2_finish = name_finish.substr( 3, 4 );
-      var hour_end = result_finish, minutes_end = result2_finish;
-      //---end
-      let
-        begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。
-        end   = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間    //ここをどうにかしたい
-        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
-        o = F (this.current),
-        rst = [ ];
-      for (let d = begin; d < end; d = new Date (+step + (+d))) {
-        let
-          a = new Array (this.rangi),
-          b = I (d),
-          c = this.plan[b] || [];
-        for (let i = 0; i < this.range; i++)
-          a[i] = c[o + i] ? '-' : '◎';
-        rst.push ([b, ...a, b]);
-      }
-     let [tb] = A (t, 'tbody');
-     rst.forEach (r => {
-       let tr = tb.insertRow (-1);
-       r.forEach (c => tr.insertCell (-1).textContent = c)
-     });
-    }
-    handleEvent ({target: t}) {
-      if (t === this.prev_btn) this.add (-this.range);
-      if (t === this.next_btn) this.add (this.range);
-    }
-  }
-  this.Shedule = Shedule;
-}
-const BUSY = [
-  '2019-02-12T10:00',
-  '2019-02-09T23:30'
-];
-let a = new Shedule (new Date, 14, BUSY), {table: b} = a;
-document.querySelector ('#calendar').appendChild (b);
-b.addEventListener ('click', a, false);
-```
-```

リンクの追記

2019/02/12 02:49

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -126,7 +126,7 @@
 [以前の質問](https://teratail.com/questions/172721)
-[リンク先でコードを動かすことができます](<div id="calendar"></div>)
+[リンク先でコードを動かすことができます](https://jsfiddle.net/wm6r921d/7/)
 ```JavaScript```

コードの追記

2019/02/11 15:33

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -126,6 +126,8 @@
 [以前の質問](https://teratail.com/questions/172721)
+[リンク先でコードを動かすことができます](<div id="calendar"></div>)
 ```JavaScript```

コードの追記

2019/02/11 15:32

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -182,7 +182,9 @@
+```
-```Javascript
+```js
 {
@@ -509,3 +511,5 @@
 b.addEventListener ('click', a, false);
 ```
+```

コードの追記

2019/02/11 14:50

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -179,3 +179,333 @@
 ...etc
 ]
+```Javascript
+{
+  const
+    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+    day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+    doc = document;
+  const
+    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
+    B = (d, n) => d.setDate (d.getDate () + n),
+    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
+    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'),
+    E = (e, d) => {
+      let
+        [a,,b] = A (e, 'label', 'br', 'label'),
+        w = d.getDay () ;
+      a.textContent = d.getDate ();
+      b.textContent = day_jname[w];
+      e.classList.add (day_name[w]);
+    },
+    F = d => {
+      let m = d.getMonth ();
+      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
+      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
+    },
+    G = ary => ary.reduce ((a, b) => {
+        let
+          c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
+          d = D (c);
+        if (! (d in a)) a[d] = [];
+        a[d][F(c)] = true;
+        return a;
+      }, { })
+    ,
+    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
+    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':')
+    ;
+  class Shedule {
+    constructor (date = new Date, range = 7, plan = []) {
+      this.current = H (date);
+      this.date = H (date);
+      this.range = range;
+      this.plan = G (plan);
+      this.table = document.createElement ('table');
+      this.remake ();
+    }
+    add (day = this.range) {
+      let d = H (this.current);
+      d.setDate (d.getDate () + day);
+      if (+this.date <= +d) {
+        this.current = d;
+        this.remake ();
+      }
+    }
+    remake () {
+      this.prev_btn = this.next_btn = null;
+      let t = this.table;
+      [...t.childNodes].forEach (e => e.remove ());
+      let
+        h = t.createTHead (),
+        tr0 = h.insertRow (-1),
+        tr1 = h.insertRow (-1),
+        d = H (this.current),
+        s = tr0.insertCell (-1),
+        c = 1,
+        m = d.getMonth ();
+      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
+        let td = tr1.insertCell (-1);
+        if (m !== d.getMonth ()) {
+          s.colSpan = c - 1;
+          s = tr0.insertCell (-1);
+          m = d.getMonth ();
+          c = 1;
+        }
+        s.textContent = C (d);
+        E (td, d);
+      }
+      s.colSpan = c - 1;
+      let e = tr0.insertCell (0);
+      e.textContent = '前の一週間';
+      e.classList.add ('button');
+      e.rowSpan = 2;
+      this.prev_btn = e;
+      e = tr0.insertCell (-1);
+      e.textContent = '次の一週間';
+      e.classList.add ('button');
+      e.rowSpan = 2;
+      this.next_btn = e;
+      //start--時間の時と分の分割処理
+      var name_start = document.getElementById('sample').value;
+      var result = name_start.substr( 0, 2 );
+      var result2 = name_start.substr( 3, 4 );
+      var hour_start = result, minutes_start = result2;
+      //---end
+      //finish
+      var name_finish = document.getElementById('sample2').value;
+      var result_finish = name_finish.substr( 0, 2 );
+      var result2_finish = name_finish.substr( 3, 4 );
+      var hour_end = result_finish, minutes_end = result2_finish;
+      //---end
+      let
+        begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。
+        end   = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間    //ここをどうにかしたい
+        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
+        o = F (this.current),
+        rst = [ ];
+      for (let d = begin; d < end; d = new Date (+step + (+d))) {
+        let
+          a = new Array (this.rangi),
+          b = I (d),
+          c = this.plan[b] || [];
+        for (let i = 0; i < this.range; i++)
+          a[i] = c[o + i] ? '-' : '◎';
+        rst.push ([b, ...a, b]);
+      }
+     let [tb] = A (t, 'tbody');
+     rst.forEach (r => {
+       let tr = tb.insertRow (-1);
+       r.forEach (c => tr.insertCell (-1).textContent = c)
+     });
+    }
+    handleEvent ({target: t}) {
+      if (t === this.prev_btn) this.add (-this.range);
+      if (t === this.next_btn) this.add (this.range);
+    }
+  }
+  this.Shedule = Shedule;
+}
+const BUSY = [
+  '2019-02-12T10:00',
+  '2019-02-09T23:30'
+];
+let a = new Shedule (new Date, 14, BUSY), {table: b} = a;
+document.querySelector ('#calendar').appendChild (b);
+b.addEventListener ('click', a, false);
+```

質問の補足

2019/02/11 14:48

投稿

rails_ruby

スコア87

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -64,9 +64,9 @@
 <input type="date" value="2019-01-01" id="dates"> <!-- 火曜日 -->
-<input type="time" value="00:00" id="time_start">
+<input type="time" value="08:00" id="time_start"> <!-- 変更前: 00:00-->
-<input type="time" value="23:30" id="time_finish">
+<input type="time" value="10:00" id="time_finish"><!-- 変更前: 23:30 -->
 ```
@@ -122,6 +122,60 @@
 ### 補足情報（FW/ツールのバージョンなど）
+以前の質問に関連しているので、参照していただけるともう少しコードが見れるかと思います。
 [以前の質問](https://teratail.com/questions/172721)
 ```JavaScript```
+### 追記
+文字数の制約上、実際の処理に関わる部分のみを抜粋しています。
+（練習で色々な処理を試しているので現在のコードがぐちゃぐちゃで載せるに載せないのも理由の一つです...）
+**forを使わないときの処理内容**
+d0,t1,t2の変数において、querySelectorを用いてinputのvalueを取得しています。
+取得した、valueを変数d1,d2でdateとtimeを結合?しています。
+そしてmではtime_startからtime_finishまでの時間帯を30分おきに配列にしています。
+そして、本質問内にはありませんが定数BUSYにpushしています。
+console.logで見ると下記のようになります。
+### コンソール
+["2019-01-01T08:00","2019-01-01T08:30","2019-01-01T09:00","2019-01-01T09:30","2019-01-01T10:00"]
+### for文を使った場合 ← ここを実現したいです。
+**１週目**
+["2019-01-01T08:00","2019-01-01T08:30","2019-01-01T09:00","2019-01-01T09:30","2019-01-01T10:00",
+**２週目**
+"2019-01-08T08:00","2019-01-08T08:30","2019-01-08T09:00","2019-01-08T09:30","2019-01-08T10:00",
+**３週目**
+"2019-01-15T08:00","2019-01-15T08:30","2019-01-15T09:00","2019-01-15T09:30","2019-01-15T10:00",
+**４週目**
+"2019-01-22T08:00","2019-01-22T08:30","2019-01-22T09:00","2019-22-01T09:30","2019-01-22T10:00"
+**5週目**
+...etc
+]