質問編集履歴

7

htmlコードの追記

2019/04/09 12:15

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -26,8 +26,20 @@
26
26
 
27
27
  ```html
28
28
 
29
+ <input type="hidden" name="off_date" value="<%= booking.booking_date.strftime("%Y-%m-%d-%H:%M") %>",class='off_date' readonly>
30
+
31
+ <input type="hidden" name="course" value="<%= booking.booking_course_name.delete!("^0-9") %>",class='course' readonly>
32
+
33
+ <input type="text" name="id" value="<%= @user.id %>",class='id' readonly>
34
+
35
+ <input type="text" name="holiday" value="<%= @user.holiday %>",class='holiday' readonly>
36
+
29
37
  <div id="calendar"></div>
30
38
 
39
+ <input type="text" name="booktime" value="" class= "booktime" id="booktime" readonly>
40
+
41
+
42
+
31
43
  ```
32
44
 
33
45
  ```js

6

コードの追記

2019/04/09 12:15

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  予約システムのカレンダーを実装しています。
4
4
 
5
- カレンダーをクリックすると、次の``console.log('hego');``出力したいです。
5
+ カレンダーをクリックすると、次の``alert('JavaScriptのアラート');``出力したいです。
6
6
 
7
7
 
8
8
 

5

コード追記

2019/04/08 14:07

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  予約システムのカレンダーを実装しています。
4
4
 
5
- カレンダーをクリックすると、次のview(今回はconsole.log('hego');出力したい)に遷移出来るようにしたいです。
5
+ カレンダーをクリックすると、次の``console.log('hego');``出力したいです。
6
6
 
7
7
 
8
8
 
@@ -32,8 +32,6 @@
32
32
 
33
33
  ```js
34
34
 
35
- window.onload = function() {
36
-
37
35
  {
38
36
 
39
37
  const
@@ -154,11 +152,11 @@
154
152
 
155
153
 
156
154
 
157
- b = new Date (Date.UTC (1970,0,1, 0, 0)),//列のスタート時間
155
+ b = new Date (Date.UTC (1970,0,1, 0, 0)),
158
-
156
+
159
- e = new Date (Date.UTC (1970,0,1,24, 30)),//列の終了時間
157
+ e = new Date (Date.UTC (1970,0,1,24, 30)),
160
-
158
+
161
- s = new Date (Date.UTC (1970,0,1, 0,30));//列の感覚調整時間
159
+ s = new Date (Date.UTC (1970,0,1, 0,30));
162
160
 
163
161
 
164
162
 
@@ -204,7 +202,7 @@
204
202
 
205
203
  //Booking
206
204
 
207
- setBook (date, occupancyTime) {// 予約日時,占有時間(分)
205
+ setBook (date, occupancyTime) {
208
206
 
209
207
  let
210
208
 
@@ -212,7 +210,7 @@
212
210
 
213
211
  dayNo = F (current),
214
212
 
215
- sTime = 30,//30間隔
213
+ sTime = 30,
216
214
 
217
215
  step = new Date (Date.UTC (1970,0,1, 0, sTime)),
218
216
 
@@ -320,11 +318,11 @@
320
318
 
321
319
  let
322
320
 
323
- begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
321
+ begin = new Date (Date.UTC (1970,0,1, 9, 0)),
324
-
322
+
325
- end = new Date (Date.UTC (1970,0,1,21, 30)),//列の終了時間
323
+ end = new Date (Date.UTC (1970,0,1,21, 30)),
326
-
324
+
327
- step = new Date (Date.UTC (1970,0,1, 0,30)),//列の間隔調整時間
325
+ step = new Date (Date.UTC (1970,0,1, 0,30)),
328
326
 
329
327
  o = F (this.current),
330
328
 
@@ -436,7 +434,7 @@
436
434
 
437
435
  }
438
436
 
439
-
437
+ //追記
440
438
 
441
439
  static getDayPlan (obj, dt) {
442
440
 
@@ -480,6 +478,30 @@
480
478
 
481
479
 
482
480
 
481
+ //___________________________
482
+
483
+ function daysCount(key){
484
+
485
+
486
+
487
+ if (window.matchMedia( "(min-width: 400px)" ).matches) {
488
+
489
+ /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
490
+
491
+ return 14;
492
+
493
+ } else {
494
+
495
+ /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
496
+
497
+ return 7;
498
+
499
+ }
500
+
501
+ }
502
+
503
+
504
+
483
505
  const
484
506
 
485
507
  BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
@@ -496,27 +518,9 @@
496
518
 
497
519
 
498
520
 
499
- // 休日設定
500
-
501
- //var holiday= Array.from(document.getElementsByName('holiday'), x => x.value);
502
-
503
- //var holiday_array = holiday.join('').split(/\s+/);
504
-
505
- //var x = holiday_array.filter(v => v);
506
-
507
- //var num = x.map( str => parseInt(str, 10) );
508
-
509
- //for(let i=0;i<num.length;i++){   
510
-
511
- // schedule.setHoliday (num[i]);
512
-
513
- //}
514
-
515
-
516
-
517
521
  // 昼休みがあるのが日火木土
518
522
 
519
- schedule.setHoliday(1);
523
+ schedule.setHoliday();
520
524
 
521
525
 
522
526
 
@@ -524,7 +528,7 @@
524
528
 
525
529
  schedule.setBook (new Date (2019, 2, 24, 9, 30), 120).remake ();
526
530
 
527
-
531
+
528
532
 
529
533
  document
530
534
 
@@ -536,10 +540,6 @@
536
540
 
537
541
 
538
542
 
539
- document.getElementById ('acdn-target').value = strDateJp (schedule.current);
540
-
541
-
542
-
543
543
  table.addEventListener('click', event => {
544
544
 
545
545
  const target = event.target;
@@ -560,42 +560,44 @@
560
560
 
561
561
  let booktime = parseInt (document.querySelector ('#booktime').value, 10);
562
562
 
563
- //表の始まりの日付
563
+
564
564
 
565
565
  let cur = schedule.current;
566
566
 
567
- //クリック時の表の(セル)座標x
567
+
568
568
 
569
569
  let x = target.cellIndex;
570
570
 
571
- //クリック時の表の(セル)座標y
571
+
572
572
 
573
573
  let y = target.parentNode.rowIndex - 2;
574
574
 
575
- //クリックされた列の日付を取得
575
+
576
576
 
577
577
  let tgt = new Date (cur);
578
578
 
579
579
  tgt.setDate (tgt.getDate () + x -1);
580
580
 
581
- //その日のスケジュールを取得
581
+
582
582
 
583
583
  let plan = Schedule.getDayPlan (schedule, tgt);
584
584
 
585
- //plan から9時~15時までを抜き出す
585
+ console.log(plan);
586
+
587
+
586
588
 
587
589
  plan = plan.slice (18, 31);
588
590
 
589
- //予約コースの判定
591
+
590
592
 
591
593
  let rng = booktime / 30 |0;
592
594
 
593
595
  plan = plan.slice (y, y + rng);
594
596
 
597
+
598
+
595
599
  if (rng === plan.length && plan.every (a=> !a[1])){
596
600
 
597
- //console.log (rng ? 'ok': 'Invalid');
598
-
599
601
  var id = Array.from(document.getElementsByName('id'), x => x.value);
600
602
 
601
603
 
@@ -626,11 +628,7 @@
626
628
 
627
629
  param = document.getElementById( "booktime" ).value;
628
630
 
629
- //newに飛ぶ
630
-
631
- window.location.href = `new.${id}`+`confirm?datetime=${value + '-' + param + '分コース' + id}`;
632
-
633
- console.log('hoge');
631
+ alert('JavaScriptのアラート');
634
632
 
635
633
  }else{
636
634
 
@@ -640,10 +638,6 @@
640
638
 
641
639
  }, false);
642
640
 
643
- }
644
-
645
-
646
-
647
641
  ```
648
642
 
649
643
 

4

var holiday= Array.from(document.getElementsByName('holiday'), x => x.value);に関する訂正。

2019/04/08 13:55

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -498,19 +498,19 @@
498
498
 
499
499
  // 休日設定
500
500
 
501
- var holiday= Array.from(document.getElementsByName('holiday'), x => x.value);
501
+ //var holiday= Array.from(document.getElementsByName('holiday'), x => x.value);
502
-
502
+
503
- var holiday_array = holiday.join('').split(/\s+/);
503
+ //var holiday_array = holiday.join('').split(/\s+/);
504
-
504
+
505
- var x = holiday_array.filter(v => v);
505
+ //var x = holiday_array.filter(v => v);
506
-
506
+
507
- var num = x.map( str => parseInt(str, 10) );
507
+ //var num = x.map( str => parseInt(str, 10) );
508
-
508
+
509
- for(let i=0;i<num.length;i++){   
509
+ //for(let i=0;i<num.length;i++){   
510
-
510
+
511
- schedule.setHoliday (num[i]);
511
+ // schedule.setHoliday (num[i]);
512
-
512
+
513
- }
513
+ //}
514
514
 
515
515
 
516
516
 

3

訂正

2019/04/08 10:43

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  予約システムのカレンダーを実装しています。
4
4
 
5
- カレンダーをクリックすると、次のviewに遷移出来るようにしたいです。
5
+ カレンダーをクリックすると、次のview(今回はconsole.log('hego');を出力したい)に遷移出来るようにしたいです。
6
+
7
+
6
8
 
7
9
 
8
10
 
@@ -628,6 +630,8 @@
628
630
 
629
631
  window.location.href = `new.${id}`+`confirm?datetime=${value + '-' + param + '分コース' + id}`;
630
632
 
633
+ console.log('hoge');
634
+
631
635
  }else{
632
636
 
633
637
  alert("その時間帯は予約は出来ません。");

2

コードの訂正

2019/04/08 10:25

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- ``shedule.setHoliday();``
15
+ ``schedule.setHoliday();``
16
16
 
17
17
  ![エラーメッセージ](1fe92631da717756cf976c41b9035fd2.png)
18
18
 
@@ -94,7 +94,7 @@
94
94
 
95
95
 
96
96
 
97
- class Shedule {
97
+ class Schedule {
98
98
 
99
99
 
100
100
 
@@ -460,7 +460,7 @@
460
460
 
461
461
 
462
462
 
463
- this.Shedule = Shedule;
463
+ this.Schedule = Schedule;
464
464
 
465
465
  }
466
466
 
@@ -482,11 +482,11 @@
482
482
 
483
483
  BUSY = ['2019-02-19T14:30', '2019-02-21T14:30'],
484
484
 
485
- plan = Shedule.convert (BUSY),
485
+ plan = Schedule.convert (BUSY),
486
-
486
+
487
- shedule = new Shedule (new Date, daysCount(), plan),
487
+ schedule = new Schedule (new Date, daysCount(), plan),
488
-
488
+
489
- table = shedule.table;
489
+ table = schedule.table;
490
490
 
491
491
 
492
492
 
@@ -506,7 +506,7 @@
506
506
 
507
507
  for(let i=0;i<num.length;i++){   
508
508
 
509
- shedule.setHoliday (num[i]);
509
+ schedule.setHoliday (num[i]);
510
510
 
511
511
  }
512
512
 
@@ -514,13 +514,13 @@
514
514
 
515
515
  // 昼休みがあるのが日火木土
516
516
 
517
- shedule.setHoliday(1);
517
+ schedule.setHoliday(1);
518
518
 
519
519
 
520
520
 
521
521
  //予約入った時 例) 2月24日 9時30 2時間コースと予約が入った時
522
522
 
523
- shedule.setBook (new Date (2019, 2, 24, 9, 30), 120).remake ();
523
+ schedule.setBook (new Date (2019, 2, 24, 9, 30), 120).remake ();
524
524
 
525
525
 
526
526
 
@@ -530,11 +530,11 @@
530
530
 
531
531
  .appendChild (table)
532
532
 
533
- .addEventListener ('click', shedule, false);
533
+ .addEventListener ('click', schedule, false);
534
-
535
-
536
-
534
+
535
+
536
+
537
- document.getElementById ('acdn-target').value = strDateJp (shedule.current);
537
+ document.getElementById ('acdn-target').value = strDateJp (schedule.current);
538
538
 
539
539
 
540
540
 
@@ -560,7 +560,7 @@
560
560
 
561
561
  //表の始まりの日付
562
562
 
563
- let cur = shedule.current;
563
+ let cur = schedule.current;
564
564
 
565
565
  //クリック時の表の(セル)座標x
566
566
 
@@ -578,7 +578,7 @@
578
578
 
579
579
  //その日のスケジュールを取得
580
580
 
581
- let plan = Shedule.getDayPlan (shedule, tgt);
581
+ let plan = Schedule.getDayPlan (schedule, tgt);
582
582
 
583
583
  //plan から9時~15時までを抜き出す
584
584
 

1

質問の補足

2019/04/08 09:43

投稿

nanase21
nanase21

スコア144

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ 予約システムのカレンダーを実装しています。
4
+
3
- カレンダーをクリックすると、次のviewに遷移出来るようにしたい。
5
+ カレンダーをクリックすると、次のviewに遷移出来るようにしたいです
4
6
 
5
7
 
6
8
 
@@ -10,7 +12,7 @@
10
12
 
11
13
 
12
14
 
13
- ``shedule.setHoliday().setLunchTime (0, 2, 4, 6);``
15
+ ``shedule.setHoliday();``
14
16
 
15
17
  ![エラーメッセージ](1fe92631da717756cf976c41b9035fd2.png)
16
18