質問編集履歴

3

タイトル変更

2021/11/16 06:03

投稿

hoge_1111
hoge_1111

スコア0

test CHANGED
@@ -1 +1 @@
1
- カレンダー機能で入力された内容を保存機能
1
+ fullcalendarを用いて入力された内容を保存機能
test CHANGED
File without changes

2

削除機能ではなく保存機能に

2021/11/16 06:03

投稿

hoge_1111
hoge_1111

スコア0

test CHANGED
@@ -1 +1 @@
1
- カレンダー機能で入力された内容を保存削除機能
1
+ カレンダー機能で入力された内容を保存機能
test CHANGED
File without changes

1

ドラッグ機能をなくしました

2021/11/16 06:02

投稿

hoge_1111
hoge_1111

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,12 @@
1
1
  ~~打ち消し線~~### 前提・実現したいこと
2
2
 
3
- カレダー機能に保存機能の追加
3
+ fullcalendarとMYSQLを使ってイベトの保存
4
4
 
5
5
 
6
6
 
7
7
  ここに質問の内容を詳しく書いてください。
8
8
 
9
- データベースで一人一人管理したカレンダー機能を作っています。その際に入力した内容を保存、削除機能がわかりません
9
+ データベースで一人一人管理したカレンダー機能を作っています。その際に入力した内容を保存機能がわかりません
10
10
 
11
11
 
12
12
 
@@ -26,6 +26,34 @@
26
26
 
27
27
 
28
28
 
29
+
30
+
31
+
32
+
33
+ //ログインしているか判定し、していなければ新規登録画面へ返す
34
+
35
+
36
+
37
+ $result = UserLogic::checkLogin();
38
+
39
+
40
+
41
+ if(!$result) {
42
+
43
+ $_SESSION['login_err'] = 'ユーザを登録してログインしてください';
44
+
45
+ header('Location: signup_form.php');
46
+
47
+ return;
48
+
49
+ }
50
+
51
+
52
+
53
+ $login_user =$_SESSION['login_user'];
54
+
55
+
56
+
29
57
  if(isset($_POST['keep'])) {
30
58
 
31
59
  $keep = $_POST['keep'];
@@ -36,32 +64,226 @@
36
64
 
37
65
 
38
66
 
39
-
40
-
41
-
42
-
43
- //ログインしているか判定し、していなければ新規登録画面へ返す
44
-
45
-
46
-
47
- $result = UserLogic::checkLogin();
48
-
49
-
50
-
51
- if(!$result) {
52
-
53
- $_SESSION['login_err'] = 'ユーザを登録してログインしてください';
54
-
55
- header('Location: signup_form.php');
56
-
57
- return;
67
+ ?>
68
+
69
+ <!DOCTYPE html>
70
+
71
+ <html>
72
+
73
+ <head>
74
+
75
+ <meta charset='utf-8' />
76
+
77
+ <!-- 画面解像度により文字サイズを対応(モバイル対応) -->
78
+
79
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
80
+
81
+ <!-- jquery CDN -->
82
+
83
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
84
+
85
+ <!-- fullcalendar CDN -->
86
+
87
+ <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' />
88
+
89
+ <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>
90
+
91
+ <!-- fullcalendar 言語 CDN -->
92
+
93
+ <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script>
94
+
95
+ <style>
96
+
97
+ /* bodyスタイル */
98
+
99
+ html, body {
100
+
101
+ overflow: hidden;
102
+
103
+ font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
104
+
105
+ font-size: 14px;
106
+
107
+ }
108
+
109
+ /* カレンダーのヘッダースタイル(年月がある部分) */
110
+
111
+ .fc-header-toolbar {
112
+
113
+ padding-top: 1em;
114
+
115
+ padding-left: 1em;
116
+
117
+ padding-right: 1em;
118
+
119
+ }
120
+
121
+ </style>
122
+
123
+ </head>
124
+
125
+ <body style="padding:30px;">
126
+
127
+ <!-- calendarタグ -->
128
+
129
+ <div id='calendar-container'>
130
+
131
+ <div id='calendar'></div>
132
+
133
+ </div>
134
+
135
+ <script>
136
+
137
+ (function(){
138
+
139
+ $(function(){
140
+
141
+ // calendarエレメント取得
142
+
143
+ var calendarEl = $('#calendar')[0];
144
+
145
+ // full-calendar生成する。
146
+
147
+ var calendar = new FullCalendar.Calendar(calendarEl, {
148
+
149
+ height: '700px', // calendarの高さ設定
150
+
151
+ expandRows: true, // 画面に合わせて高さを再設
152
+
153
+ slotMinTime: '00:00', // Dayカレンダーに開始時間
154
+
155
+ slotMaxTime: '24:00', // Dayカレンダーに終了時間
156
+
157
+ // ヘッダーに表示するツールバー
158
+
159
+ headerToolbar: {
160
+
161
+ left: 'prev,next today',
162
+
163
+ center: 'title',
164
+
165
+ right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
166
+
167
+ },
168
+
169
+ initialView: 'dayGridMonth', // 初期ロードする時、見えるカレンダーの画面(基本設定:月)
170
+
171
+ navLinks: true, // 日付を選択するとDayカレンダーやWeekカレンダーにリンク
172
+
173
+ editable: true, // 修正可能
174
+
175
+ selectable: true, // カレンダーのドラッグ設定可能
176
+
177
+ nowIndicator: true, // 現在時間マーク
178
+
179
+ dayMaxEvents: true, // イベントの数がオバーすると高さの制限(+のマークと何個式で表現)
180
+
181
+ locale: 'ja', // 日本語設定
182
+
183
+ eventAdd: function(obj) { // イベントが追加すると発生するイベント
184
+
185
+ console.log(obj);
186
+
187
+ },
188
+
189
+ eventChange: function(obj) { // イベントが修正されたら発生するイベント
190
+
191
+ console.log(obj);
192
+
193
+ },
194
+
195
+ eventRemove: function(obj){ // イベントが削除すると発生するイベント
196
+
197
+ console.log(obj);
198
+
199
+ },
200
+
201
+ select: function(arg) { // カレンダーでドラックでイベントを生成することが可能。
202
+
203
+ var title = prompt('Event Title:');
204
+
205
+ if (title) {
206
+
207
+ calendar.addEvent({
208
+
209
+ title: title,
210
+
211
+ start: arg.start,
212
+
213
+ end: arg.end,
214
+
215
+ allDay: arg.allDay
216
+
217
+ })
218
+
219
+ }
220
+
221
+ calendar.unselect()
222
+
223
+ }
224
+
225
+ });
226
+
227
+ // カレンダーレンダリング
228
+
229
+ calendar.render();
230
+
231
+ });
232
+
233
+ })();
234
+
235
+ </script>
236
+
237
+
238
+
239
+
240
+
241
+ <form action="keep.php" method="POST">
242
+
243
+ <input type="submit" name="keep" value="保存">
244
+
245
+ </form>
246
+
247
+
248
+
249
+ <form action="logout.php" method="POST">
250
+
251
+ <input type="submit" name="logout" value="ログアウト">
252
+
253
+ </form>
254
+
255
+
256
+
257
+ </body>
258
+
259
+ </html>
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+ keep.php
268
+
269
+ <?php
270
+
271
+ session_start();
272
+
273
+ require_once '../classes/UserLogic.php';
274
+
275
+
276
+
277
+ if(isset($_POST['mypage'])) {
278
+
279
+ $keep = $_POST['mypage'];
280
+
281
+ echo $mypage;
58
282
 
59
283
  }
60
284
 
61
285
 
62
286
 
63
- $login_user =$_SESSION['login_user'];
64
-
65
287
 
66
288
 
67
289
  ?>
@@ -74,392 +296,30 @@
74
296
 
75
297
  <meta charset="UTF-8">
76
298
 
299
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
300
+
301
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
302
+
77
- <title>マイページ</title>
303
+ <title>保存画面</title>
78
-
79
-
80
304
 
81
305
  </head>
82
306
 
83
307
  <body>
84
308
 
85
- <!--<h2>マイページ</h2>
309
+ <h2>保存完了</h2>
86
-
87
- <p>ログインユーザ:<?php echo h( $login_user['name']) ?></p>
310
+
88
-
89
- <p>メールアドレス:<?php echo h( $login_user['email']) ?></p>-->
90
-
91
-
92
-
93
- <div id='wrap'>
94
-
95
- <!-- ドラックボックス -->
96
-
97
- <div id='external-events'>
98
-
99
- <h4>Draggable Events</h4>
311
+ <p>保存しました!</p>
100
-
101
- <div id='external-events-list'></div>
312
+
102
-
103
- </div>
104
-
105
-
106
-
107
- <!-- calendarタグ -->
108
-
109
- <div id='calendar-wrap'>
110
-
111
- <div id='calendar1'></div>
112
-
113
- </div>
114
-
115
- </div>
116
-
117
-
118
-
119
- <script>
120
-
121
- (function(){
122
-
123
- $(function(){
124
-
125
- // ドラックボックスのエレメントを取得
126
-
127
- var containerEl = $('#external-events-list')[0];
128
-
129
-
130
-
131
- // ドラックボックスを生成する。
132
-
133
- new FullCalendar.Draggable(containerEl, {
134
-
135
- itemSelector: '.fc-event',
136
-
137
- eventData: function(eventEl) {
138
-
139
- return {
140
-
141
- title: eventEl.innerText.trim()
142
-
143
- }
144
-
145
- }
146
-
147
- });
148
-
149
- // ドラックイベントを追加
150
-
151
- for(var i=1; i<=1;i++) {
152
-
153
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
154
-
155
- $event = $("<div class='fc-event-main'></div>").text("誕生日 ");
156
-
157
- $('#external-events-list').append($div.append($event));
158
-
159
- }
160
-
161
-
162
-
163
- for(var i=1; i<=1;i++) {
164
-
165
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
166
-
167
- $event = $("<div class='fc-event-main'></div>").text("運動会");
168
-
169
- $('#external-events-list').append($div.append($event));
170
-
171
- }
172
-
173
-
174
-
175
- for(var i=1; i<=1;i++) {
176
-
177
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
178
-
179
- $event = $("<div class='fc-event-main'></div>").text("バイト");
180
-
181
- $('#external-events-list').append($div.append($event));
182
-
183
- }
184
-
185
-
186
-
187
- for(var i=1; i<=1;i++) {
188
-
189
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
190
-
191
- $event = $("<div class='fc-event-main'></div>").text("遊び");
192
-
193
- $('#external-events-list').append($div.append($event));
194
-
195
- }
196
-
197
-
198
-
199
- for(var i=1; i<=1;i++) {
200
-
201
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
202
-
203
- $event = $("<div class='fc-event-main'></div>").text("旅行");
204
-
205
- $('#external-events-list').append($div.append($event));
206
-
207
- }
208
-
209
-
210
-
211
- for(var i=1; i<=1;i++) {
212
-
213
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
214
-
215
- $event = $("<div class='fc-event-main'></div>").text("デート");
216
-
217
- $('#external-events-list').append($div.append($event));
218
-
219
- }
220
-
221
-
222
-
223
- for(var i=1; i<=1;i++) {
224
-
225
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
226
-
227
- $event = $("<div class='fc-event-main'></div>").text("趣味");
228
-
229
- $('#external-events-list').append($div.append($event));
230
-
231
- }
232
-
233
-
234
-
235
- for(var i=1; i<=1;i++) {
236
-
237
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
238
-
239
- $event = $("<div class='fc-event-main'></div>").text("習い事");
240
-
241
- $('#external-events-list').append($div.append($event));
242
-
243
- }
244
-
245
-
246
-
247
- for(var i=1; i<=1;i++) {
248
-
249
- var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
250
-
251
- $event = $("<div class='fc-event-main'></div>").text("学校");
252
-
253
- $('#external-events-list').append($div.append($event));
254
-
255
- }
256
-
257
-
258
-
259
- // calendarエレメント取得
260
-
261
- var calendarEl = $('#calendar1')[0];
262
-
263
-
264
-
265
- // full-calendar生成する。
266
-
267
- var calendar = new FullCalendar.Calendar(calendarEl, {
268
-
269
-
270
-
271
- height: '700px', // calendarの高さ設定
272
-
273
- expandRows: true, // 画面に合わせて高さを再設定
274
-
275
- slotMinTime: '00:00', // Dayカレンダーに開始時間
276
-
277
- slotMaxTime: '24:00', // Dayカレンダーに終了時間
278
-
279
-
280
-
281
- // ヘッダーに表示するツールバー
282
-
283
- headerToolbar: {
284
-
285
- left: 'prev,next today',
286
-
287
- center: 'title',
288
-
289
- right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
290
-
291
- },
292
-
293
- initialView: 'dayGridMonth', // 初期ロードする時、見えるカレンダーの画面(基本設定:月)
294
-
295
- //initialDate: '2021-11-09', // 初期日付設定(設定しなければ基本的に本日の日付で設定)
296
-
297
- locale: 'ja', // 日本語設定
298
-
299
- navLinks: true, // 日付を選択するとDayカレンダーやWeekカレンダーにリンク
300
-
301
- editable: true, // 修正可能
302
-
303
- selectable: true, // カレンダーのドラッグ設定可能
304
-
305
- nowIndicator: true, // 現在時間マーク
306
-
307
- dayMaxEvents: true, // イベントの数がオバーすると高さの制限(+のマークと何個式で表現)
308
-
309
- droppable: true, // ドラック可能
310
-
311
- /*drop: function(arg) { // ドラッグアンドドロップが成功する場合
312
-
313
- // ドラックボックスでイベントを削除する。
314
-
315
- arg.draggedEl.parentNode.removeChild(arg.draggedEl);
316
-
317
- }*/
318
-
319
-
320
-
321
- eventAdd: function(obj) { // イベントが追加すると発生するイベント
322
-
323
- console.log(obj);
324
-
325
- },
326
-
327
- eventChange: function(obj) { // イベントが修正されたら発生するイベント
328
-
329
- console.log(obj);
330
-
331
- },
332
-
333
- eventRemove: function(obj){ // イベントが削除すると発生するイベント
334
-
335
- console.log(obj);
336
-
337
- },
338
-
339
- select: function(arg) { // カレンダーでドラックでイベントを生成することが可能。
340
-
341
- var title = prompt('Event Title:');
342
-
343
- if (title) {
344
-
345
- calendar.addEvent({
346
-
347
- title: title,
348
-
349
- start: arg.start,
350
-
351
- end: arg.end,
352
-
353
- allDay: arg.allDay
354
-
355
- })
356
-
357
- }
358
-
359
- calendar.unselect()
360
-
361
- }
362
-
363
-
364
-
365
-
366
-
367
- });
368
-
369
- // カレンダーレンダリング
370
-
371
- calendar.render();
372
-
373
- });
374
-
375
- })();
376
-
377
- </script>
378
-
379
-
380
-
381
-
382
-
383
- <form action="keep.php" method="POST">
313
+ <form action="mypage.php" method="POST">
384
-
314
+
385
- <input type="submit" name="keep" value="保存">
315
+ <input type="submit" name="mypage" value="マイページへ">
386
316
 
387
317
  </form>
388
318
 
389
-
390
-
391
- <form action="logout.php" method="POST">
392
-
393
- <input type="submit" name="logout" value="ログアウト">
394
-
395
- </form>
396
-
397
-
398
-
399
319
  </body>
400
320
 
401
321
  </html>
402
322
 
403
-
404
-
405
-
406
-
407
- keep.php
408
-
409
- <?php
410
-
411
- session_start();
412
-
413
- require_once '../classes/UserLogic.php';
414
-
415
-
416
-
417
- if(isset($_POST['mypage'])) {
418
-
419
- $keep = $_POST['mypage'];
420
-
421
- echo $mypage;
422
-
423
- }
424
-
425
-
426
-
427
-
428
-
429
- ?>
430
-
431
- <!DOCTYPE html>
432
-
433
- <html lang="en">
434
-
435
- <head>
436
-
437
- <meta charset="UTF-8">
438
-
439
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
440
-
441
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
442
-
443
- <title>保存画面</title>
444
-
445
- </head>
446
-
447
- <body>
448
-
449
- <h2>保存完了</h2>
450
-
451
- <p>保存しました!</p>
452
-
453
- <form action="mypage.php" method="POST">
454
-
455
- <input type="submit" name="mypage" value="マイページへ">
456
-
457
- </form>
458
-
459
- </body>
460
-
461
- </html>
462
-
463
323
  ### 試したこと
464
324
 
465
325