質問編集履歴
3
タイトル変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
fullcalendarを用いて入力された内容を保存機能
|
body
CHANGED
|
File without changes
|
2
削除機能ではなく保存機能に
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
カレンダー機能で入力された内容を保存
|
|
1
|
+
カレンダー機能で入力された内容を保存機能
|
body
CHANGED
|
File without changes
|
1
ドラッグ機能をなくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
~~打ち消し線~~### 前提・実現したいこと
|
|
2
|
-
|
|
2
|
+
fullcalendarとMYSQLを使ってイベントの保存
|
|
3
3
|
|
|
4
4
|
ここに質問の内容を詳しく書いてください。
|
|
5
|
-
データベースで一人一人管理したカレンダー機能を作っています。その際に入力した内容を保存
|
|
5
|
+
データベースで一人一人管理したカレンダー機能を作っています。その際に入力した内容を保存機能がわかりません
|
|
6
6
|
|
|
7
7
|
### 該当のソースコード
|
|
8
8
|
mypage.php
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
require_once '../classes/UserLogic.php';
|
|
13
13
|
require_once '../functions.php';
|
|
14
14
|
|
|
15
|
-
if(isset($_POST['keep'])) {
|
|
16
|
-
$keep = $_POST['keep'];
|
|
17
|
-
echo $keep;
|
|
18
|
-
}
|
|
19
15
|
|
|
20
16
|
|
|
21
|
-
|
|
22
17
|
//ログインしているか判定し、していなければ新規登録画面へ返す
|
|
23
18
|
|
|
24
19
|
$result = UserLogic::checkLogin();
|
|
@@ -31,164 +26,98 @@
|
|
|
31
26
|
|
|
32
27
|
$login_user =$_SESSION['login_user'];
|
|
33
28
|
|
|
29
|
+
if(isset($_POST['keep'])) {
|
|
30
|
+
$keep = $_POST['keep'];
|
|
31
|
+
echo $keep;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
34
|
?>
|
|
35
35
|
<!DOCTYPE html>
|
|
36
|
-
<html
|
|
36
|
+
<html>
|
|
37
37
|
<head>
|
|
38
|
-
|
|
38
|
+
<meta charset='utf-8' />
|
|
39
|
+
<!-- 画面解像度により文字サイズを対応(モバイル対応) -->
|
|
40
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
41
|
+
<!-- jquery CDN -->
|
|
42
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
43
|
+
<!-- fullcalendar CDN -->
|
|
44
|
+
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' />
|
|
45
|
+
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script>
|
|
46
|
+
<!-- fullcalendar 言語 CDN -->
|
|
47
|
+
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script>
|
|
48
|
+
<style>
|
|
49
|
+
/* bodyスタイル */
|
|
50
|
+
html, body {
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
}
|
|
55
|
+
/* カレンダーのヘッダースタイル(年月がある部分) */
|
|
56
|
+
.fc-header-toolbar {
|
|
57
|
+
padding-top: 1em;
|
|
58
|
+
padding-left: 1em;
|
|
59
|
+
padding-right: 1em;
|
|
60
|
+
}
|
|
39
|
-
|
|
61
|
+
</style>
|
|
40
|
-
|
|
41
62
|
</head>
|
|
63
|
+
<body style="padding:30px;">
|
|
64
|
+
<!-- calendarタグ -->
|
|
65
|
+
<div id='calendar-container'>
|
|
66
|
+
<div id='calendar'></div>
|
|
67
|
+
</div>
|
|
42
|
-
<
|
|
68
|
+
<script>
|
|
69
|
+
(function(){
|
|
70
|
+
$(function(){
|
|
71
|
+
// calendarエレメント取得
|
|
72
|
+
var calendarEl = $('#calendar')[0];
|
|
73
|
+
// full-calendar生成する。
|
|
74
|
+
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
75
|
+
height: '700px', // calendarの高さ設定
|
|
76
|
+
expandRows: true, // 画面に合わせて高さを再設
|
|
77
|
+
slotMinTime: '00:00', // Dayカレンダーに開始時間
|
|
78
|
+
slotMaxTime: '24:00', // Dayカレンダーに終了時間
|
|
79
|
+
// ヘッダーに表示するツールバー
|
|
80
|
+
headerToolbar: {
|
|
81
|
+
left: 'prev,next today',
|
|
82
|
+
center: 'title',
|
|
83
|
+
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
|
|
84
|
+
},
|
|
85
|
+
initialView: 'dayGridMonth', // 初期ロードする時、見えるカレンダーの画面(基本設定:月)
|
|
86
|
+
navLinks: true, // 日付を選択するとDayカレンダーやWeekカレンダーにリンク
|
|
87
|
+
editable: true, // 修正可能
|
|
88
|
+
selectable: true, // カレンダーのドラッグ設定可能
|
|
89
|
+
nowIndicator: true, // 現在時間マーク
|
|
90
|
+
dayMaxEvents: true, // イベントの数がオバーすると高さの制限(+のマークと何個式で表現)
|
|
43
|
-
|
|
91
|
+
locale: 'ja', // 日本語設定
|
|
92
|
+
eventAdd: function(obj) { // イベントが追加すると発生するイベント
|
|
93
|
+
console.log(obj);
|
|
94
|
+
},
|
|
44
|
-
|
|
95
|
+
eventChange: function(obj) { // イベントが修正されたら発生するイベント
|
|
96
|
+
console.log(obj);
|
|
97
|
+
},
|
|
98
|
+
eventRemove: function(obj){ // イベントが削除すると発生するイベント
|
|
99
|
+
console.log(obj);
|
|
100
|
+
},
|
|
45
|
-
|
|
101
|
+
select: function(arg) { // カレンダーでドラックでイベントを生成することが可能。
|
|
102
|
+
var title = prompt('Event Title:');
|
|
103
|
+
if (title) {
|
|
104
|
+
calendar.addEvent({
|
|
105
|
+
title: title,
|
|
106
|
+
start: arg.start,
|
|
107
|
+
end: arg.end,
|
|
108
|
+
allDay: arg.allDay
|
|
109
|
+
})
|
|
110
|
+
}
|
|
111
|
+
calendar.unselect()
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
// カレンダーレンダリング
|
|
115
|
+
calendar.render();
|
|
116
|
+
});
|
|
117
|
+
})();
|
|
118
|
+
</script>
|
|
46
119
|
|
|
47
|
-
<div id='wrap'>
|
|
48
|
-
<!-- ドラックボックス -->
|
|
49
|
-
<div id='external-events'>
|
|
50
|
-
<h4>Draggable Events</h4>
|
|
51
|
-
<div id='external-events-list'></div>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<!-- calendarタグ -->
|
|
55
|
-
<div id='calendar-wrap'>
|
|
56
|
-
<div id='calendar1'></div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
120
|
|
|
60
|
-
<script>
|
|
61
|
-
(function(){
|
|
62
|
-
$(function(){
|
|
63
|
-
// ドラックボックスのエレメントを取得
|
|
64
|
-
var containerEl = $('#external-events-list')[0];
|
|
65
|
-
|
|
66
|
-
// ドラックボックスを生成する。
|
|
67
|
-
new FullCalendar.Draggable(containerEl, {
|
|
68
|
-
itemSelector: '.fc-event',
|
|
69
|
-
eventData: function(eventEl) {
|
|
70
|
-
return {
|
|
71
|
-
title: eventEl.innerText.trim()
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
// ドラックイベントを追加
|
|
76
|
-
for(var i=1; i<=1;i++) {
|
|
77
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
78
|
-
$event = $("<div class='fc-event-main'></div>").text("誕生日 ");
|
|
79
|
-
$('#external-events-list').append($div.append($event));
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
for(var i=1; i<=1;i++) {
|
|
83
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
84
|
-
$event = $("<div class='fc-event-main'></div>").text("運動会");
|
|
85
|
-
$('#external-events-list').append($div.append($event));
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
for(var i=1; i<=1;i++) {
|
|
89
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
90
|
-
$event = $("<div class='fc-event-main'></div>").text("バイト");
|
|
91
|
-
$('#external-events-list').append($div.append($event));
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
for(var i=1; i<=1;i++) {
|
|
95
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
96
|
-
$event = $("<div class='fc-event-main'></div>").text("遊び");
|
|
97
|
-
$('#external-events-list').append($div.append($event));
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
for(var i=1; i<=1;i++) {
|
|
101
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
102
|
-
$event = $("<div class='fc-event-main'></div>").text("旅行");
|
|
103
|
-
$('#external-events-list').append($div.append($event));
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
for(var i=1; i<=1;i++) {
|
|
107
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
108
|
-
$event = $("<div class='fc-event-main'></div>").text("デート");
|
|
109
|
-
$('#external-events-list').append($div.append($event));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
for(var i=1; i<=1;i++) {
|
|
113
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
114
|
-
$event = $("<div class='fc-event-main'></div>").text("趣味");
|
|
115
|
-
$('#external-events-list').append($div.append($event));
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
for(var i=1; i<=1;i++) {
|
|
119
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
120
|
-
$event = $("<div class='fc-event-main'></div>").text("習い事");
|
|
121
|
-
$('#external-events-list').append($div.append($event));
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
for(var i=1; i<=1;i++) {
|
|
125
|
-
var $div = $("<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'></div>");
|
|
126
|
-
$event = $("<div class='fc-event-main'></div>").text("学校");
|
|
127
|
-
$('#external-events-list').append($div.append($event));
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// calendarエレメント取得
|
|
131
|
-
var calendarEl = $('#calendar1')[0];
|
|
132
|
-
|
|
133
|
-
// full-calendar生成する。
|
|
134
|
-
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
135
|
-
|
|
136
|
-
height: '700px', // calendarの高さ設定
|
|
137
|
-
expandRows: true, // 画面に合わせて高さを再設定
|
|
138
|
-
slotMinTime: '00:00', // Dayカレンダーに開始時間
|
|
139
|
-
slotMaxTime: '24:00', // Dayカレンダーに終了時間
|
|
140
|
-
|
|
141
|
-
// ヘッダーに表示するツールバー
|
|
142
|
-
headerToolbar: {
|
|
143
|
-
left: 'prev,next today',
|
|
144
|
-
center: 'title',
|
|
145
|
-
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
|
|
146
|
-
},
|
|
147
|
-
initialView: 'dayGridMonth', // 初期ロードする時、見えるカレンダーの画面(基本設定:月)
|
|
148
|
-
//initialDate: '2021-11-09', // 初期日付設定(設定しなければ基本的に本日の日付で設定)
|
|
149
|
-
locale: 'ja', // 日本語設定
|
|
150
|
-
navLinks: true, // 日付を選択するとDayカレンダーやWeekカレンダーにリンク
|
|
151
|
-
editable: true, // 修正可能
|
|
152
|
-
selectable: true, // カレンダーのドラッグ設定可能
|
|
153
|
-
nowIndicator: true, // 現在時間マーク
|
|
154
|
-
dayMaxEvents: true, // イベントの数がオバーすると高さの制限(+のマークと何個式で表現)
|
|
155
|
-
droppable: true, // ドラック可能
|
|
156
|
-
/*drop: function(arg) { // ドラッグアンドドロップが成功する場合
|
|
157
|
-
// ドラックボックスでイベントを削除する。
|
|
158
|
-
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
|
|
159
|
-
}*/
|
|
160
|
-
|
|
161
|
-
eventAdd: function(obj) { // イベントが追加すると発生するイベント
|
|
162
|
-
console.log(obj);
|
|
163
|
-
},
|
|
164
|
-
eventChange: function(obj) { // イベントが修正されたら発生するイベント
|
|
165
|
-
console.log(obj);
|
|
166
|
-
},
|
|
167
|
-
eventRemove: function(obj){ // イベントが削除すると発生するイベント
|
|
168
|
-
console.log(obj);
|
|
169
|
-
},
|
|
170
|
-
select: function(arg) { // カレンダーでドラックでイベントを生成することが可能。
|
|
171
|
-
var title = prompt('Event Title:');
|
|
172
|
-
if (title) {
|
|
173
|
-
calendar.addEvent({
|
|
174
|
-
title: title,
|
|
175
|
-
start: arg.start,
|
|
176
|
-
end: arg.end,
|
|
177
|
-
allDay: arg.allDay
|
|
178
|
-
})
|
|
179
|
-
}
|
|
180
|
-
calendar.unselect()
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
});
|
|
185
|
-
// カレンダーレンダリング
|
|
186
|
-
calendar.render();
|
|
187
|
-
});
|
|
188
|
-
})();
|
|
189
|
-
</script>
|
|
190
|
-
|
|
191
|
-
|
|
192
121
|
<form action="keep.php" method="POST">
|
|
193
122
|
<input type="submit" name="keep" value="保存">
|
|
194
123
|
</form>
|
|
@@ -201,6 +130,7 @@
|
|
|
201
130
|
</html>
|
|
202
131
|
|
|
203
132
|
|
|
133
|
+
|
|
204
134
|
keep.php
|
|
205
135
|
<?php
|
|
206
136
|
session_start();
|