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

質問編集履歴

5

jsタグ追加

2021/06/01 05:43

投稿

kei161220
kei161220

スコア1

title CHANGED
File without changes
body CHANGED
@@ -46,6 +46,7 @@
46
46
  <script src="../assets/fullcalendar/4_3_1/packages/daygrid/main.js"></script>
47
47
  <script src="../assets/fullcalendar/4_3_1/packages/timegrid/main.js"></script>
48
48
  <script src="../assets/fullcalendar/4_3_1/packages/list/main.js"></script>
49
+ <script src="../common/js/default_cal.js"></script>
49
50
 
50
51
  <body>
51
52
  <div class="row">
@@ -71,7 +72,7 @@
71
72
  </body>
72
73
  </html>
73
74
  ```
74
- ```jquery
75
+ ```jquery(default_cal.js)
75
76
 
76
77
  //
77
78
  // jqueryロード

4

タグ追加

2021/06/01 05:43

投稿

kei161220
kei161220

スコア1

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,10 @@
8
8
  エラーが発生してカレンダーへ予定が反映(更新)されません。
9
9
 
10
10
  どなたかおわかりでしたらカレンダーへの予定更新と削除の方法を教えて頂けたらと思います。
11
+ ※カレンダーのevents予定の表示や、予定内容の取得など基本的な部分については
12
+ 正常に動いています。
13
+
14
+
11
15
  v4が無理ならv5でも大丈夫です。
12
16
 
13
17
  宜しくお願い致します。
@@ -22,8 +26,8 @@
22
26
 
23
27
  ### 該当のソースコード
24
28
 
25
- ```jquery
29
+ ```html
26
-
30
+ <html lang="ja">
27
31
  <link href="../assets/fullcalendar/4_3_1/packages/core/main.css" rel="stylesheet" />
28
32
  <link href="../assets/fullcalendar/4_3_1/packages/daygrid/main.css" rel="stylesheet" />
29
33
  <link href="../assets/fullcalendar/4_3_1/packages/timegrid/main.css" rel="stylesheet" />
@@ -43,9 +47,36 @@
43
47
  <script src="../assets/fullcalendar/4_3_1/packages/timegrid/main.js"></script>
44
48
  <script src="../assets/fullcalendar/4_3_1/packages/list/main.js"></script>
45
49
 
50
+ <body>
51
+ <div class="row">
52
+ <div class="col-xs-12">
53
+ <div class="row">
54
+ <div class="col-sm-9">
55
+ <div id="calendar"></div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div id="modal-table" class="modal fade" tabindex="-1">
62
+ <div class="modal-dialog">
63
+ <div class="modal-content">
64
+ <div class="modal-body">
65
+ <!-- 省略 -->
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ </body>
72
+ </html>
73
+ ```
74
+ ```jquery
75
+
46
76
  //
47
- // jqueryロード部分は省略
77
+ // jqueryロード
48
78
  //
79
+ window.addEventListener('DOMContentLoaded', function(){
49
80
 
50
81
  //カレンダーイベント
51
82
  var calendarEl = document.getElementById('calendar');
@@ -87,7 +118,7 @@
87
118
 
88
119
  });
89
120
  calendar.render();
90
-
121
+ });
91
122
  ```
92
123
 
93
124
  ### 更新方法について試したこと

3

jqueryロード部分省略

2021/06/01 05:38

投稿

kei161220
kei161220

スコア1

title CHANGED
File without changes
body CHANGED
@@ -43,6 +43,10 @@
43
43
  <script src="../assets/fullcalendar/4_3_1/packages/timegrid/main.js"></script>
44
44
  <script src="../assets/fullcalendar/4_3_1/packages/list/main.js"></script>
45
45
 
46
+ //
47
+ // jqueryロード部分は省略
48
+ //
49
+
46
50
  //カレンダーイベント
47
51
  var calendarEl = document.getElementById('calendar');
48
52
  var calendar = new FullCalendar.Calendar(calendarEl, {

2

読み込みタグの追加

2021/06/01 05:28

投稿

kei161220
kei161220

スコア1

title CHANGED
File without changes
body CHANGED
@@ -23,6 +23,26 @@
23
23
  ### 該当のソースコード
24
24
 
25
25
  ```jquery
26
+
27
+ <link href="../assets/fullcalendar/4_3_1/packages/core/main.css" rel="stylesheet" />
28
+ <link href="../assets/fullcalendar/4_3_1/packages/daygrid/main.css" rel="stylesheet" />
29
+ <link href="../assets/fullcalendar/4_3_1/packages/timegrid/main.css" rel="stylesheet" />
30
+ <link href="../assets/fullcalendar/4_3_1/packages/list/main.css" rel="stylesheet" />
31
+
32
+ <script src="../assets/js/bootstrap.min.js"></script>
33
+ <script src="../assets/js/jquery-ui.min.js"></script>
34
+ <script src="../assets/js/jquery-ui.custom.min.js"></script>
35
+ <script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
36
+ <script src="../assets/js/bootbox.js"></script>
37
+ <script src="../assets/js/jquery.easypiechart.min.js"></script>
38
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
39
+ <script src="../assets/js/moment.min.js"></script>
40
+ <script src="../assets/fullcalendar/4_3_1/packages/core/main.js"></script>
41
+ <script src="../assets/fullcalendar/4_3_1/packages/interaction/main.js"></script>
42
+ <script src="../assets/fullcalendar/4_3_1/packages/daygrid/main.js"></script>
43
+ <script src="../assets/fullcalendar/4_3_1/packages/timegrid/main.js"></script>
44
+ <script src="../assets/fullcalendar/4_3_1/packages/list/main.js"></script>
45
+
26
46
  //カレンダーイベント
27
47
  var calendarEl = document.getElementById('calendar');
28
48
  var calendar = new FullCalendar.Calendar(calendarEl, {

1

削除方法の追加

2021/06/01 05:27

投稿

kei161220
kei161220

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ### Fullcalendar V4での更新方法について
1
+ ### Fullcalendar V4での更新・削除方法について
2
2
 
3
3
  Fullcalendar V4において(https://fullcalendar.io/)
4
4
  実際にスケジュールとして運用していく場合、eventsによるスケジュール事前登録だけでなく
@@ -7,7 +7,7 @@
7
7
  下記方法で試してみましたが、記載の方法はおそらくV4ではないため、
8
8
  エラーが発生してカレンダーへ予定が反映(更新)されません。
9
9
 
10
- どなたかおわかりでしたらカレンダーへの予定更新方法を教えて頂けたらと思います。
10
+ どなたかおわかりでしたらカレンダーへの予定更新と削除の方法を教えて頂けたらと思います。
11
11
  v4が無理ならv5でも大丈夫です。
12
12
 
13
13
  宜しくお願い致します。
@@ -54,6 +54,11 @@
54
54
 
55
55
  });
56
56
 
57
+ //モーダル内削除ボタンクリック
58
+ $('#btn-modal-delete').on('click', function(ev) {
59
+ //ここでエラー
60
+ calEvent.remove();
61
+ });
57
62
  }
58
63
 
59
64
  });
@@ -68,8 +73,9 @@
68
73
  event.title = 'Update!!!';
69
74
  ●おそらくV4では非対応なのでだめ
70
75
  calendarEl.fullCalendar('updateEvent', calEvent);
76
+ ●削除のほうもだめ
77
+ calEvent.remove();
71
78
 
72
-
73
79
  ### 補足情報(バージョン)
74
80
 
75
81
  Fullcalendar V4