質問編集履歴
4
php、js
test
CHANGED
File without changes
|
test
CHANGED
@@ -70,71 +70,6 @@
|
|
70
70
|
<body>
|
71
71
|
<div class="htmlContainer">
|
72
72
|
<!-- header -->
|
73
|
-
<header class="header is-active">
|
74
|
-
<div class="header__fixed">
|
75
|
-
<div class="header__fixed__inner">
|
76
|
-
<div class="header__fixed__nav">
|
77
|
-
<p class="header__fixed__logo">
|
78
|
-
<a href="../../">
|
79
|
-
<img class="lazyloaded" src="../PTSHIFT.png" data-src="" width="182" height="44" alt=""></a>
|
80
|
-
</p>
|
81
|
-
<div class="globalMenu__button__wrap">
|
82
|
-
<div class="globalMenu__login">
|
83
|
-
<a href="#" target="_blank" rel="noopener" data-analysis-trigger="login_01">ログイン</a>
|
84
|
-
</div>
|
85
|
-
<div class="globalMenu__signup">
|
86
|
-
<div class="globalMenu__button">
|
87
|
-
<a href="#" target="_blank" rel="noopener" data-analysis-trigger="entry_01">お問い合わせ</a>
|
88
|
-
</div>
|
89
|
-
</div>
|
90
|
-
</div>
|
91
|
-
<p></p>
|
92
|
-
<div class="globalBtn c-hover" id="globalBtn">
|
93
|
-
<div class="globalBtn__line globalBtn__line-1"></div>
|
94
|
-
<div class="globalBtn__line globalBtn__line-2"></div>
|
95
|
-
<div class="globalBtn__line globalBtn__line-3"></div>
|
96
|
-
</div>
|
97
|
-
</div>
|
98
|
-
<nav>
|
99
|
-
<div class="globalMenu">
|
100
|
-
<div class="globalMenu__list">
|
101
|
-
<a href="#" data-analysis-trigger="case">導入事例</a>
|
102
|
-
</div>
|
103
|
-
<div class="globalMenu__list">
|
104
|
-
<a href="#" data-analysis-trigger="function">機能</a>
|
105
|
-
</div>
|
106
|
-
<div class="globalMenu__list">
|
107
|
-
<a href="#" data-analysis-trigger="ep">複数店舗で使いたい場合</a>
|
108
|
-
</div>
|
109
|
-
<div class="globalMenu__list">
|
110
|
-
<a href="#" target="_blank" rel="noopener" data-analysis-trigger="faq_115000412811">よくある質問</a>
|
111
|
-
</div>
|
112
|
-
<div class="globalMenu__list">
|
113
|
-
<a href="#" data-analysis-trigger="seminar_list">セミナー</a>
|
114
|
-
</div>
|
115
|
-
<div class="globalMenu__list is-nobdr">
|
116
|
-
<a href="#" data-analysis-trigger="document_list">資料一覧</a>
|
117
|
-
</div>
|
118
|
-
<div class="globalMenu__login">
|
119
|
-
<a href="#" target="_blank" rel="noopener" data-analysis-trigger="login_01">ログイン</a>
|
120
|
-
</div>
|
121
|
-
<div class="globalMenu__signup">
|
122
|
-
<div class="globalMenu__button">
|
123
|
-
<a href="#" target="_blank" rel="noopener" data-analysis-trigger="entry_01">お問い合わせ</a>
|
124
|
-
</div>
|
125
|
-
</div>
|
126
|
-
</div>
|
127
|
-
</nav>
|
128
|
-
</div>
|
129
|
-
</div>
|
130
|
-
</header>
|
131
|
-
|
132
|
-
<div id="user_name">
|
133
|
-
<div class="user_fixed">
|
134
|
-
<p class="user_greeting">お疲れ様です! 役職<?php echo htmlspecialchars($role); ?> <?php echo htmlspecialchars($name); ?> さん</p>
|
135
|
-
</div>
|
136
|
-
</div>
|
137
|
-
|
138
73
|
<main>
|
139
74
|
<div class="container">
|
140
75
|
<h1>スケジュール</h1>
|
@@ -143,13 +78,6 @@
|
|
143
78
|
<div id='calendar'></div>
|
144
79
|
</div>
|
145
80
|
</main>
|
146
|
-
|
147
|
-
<footer>
|
148
|
-
<div class="footer">
|
149
|
-
<p>© 2024 My Website</p>
|
150
|
-
</div>
|
151
|
-
</footer>
|
152
|
-
|
153
81
|
</div>
|
154
82
|
</body>
|
155
83
|
</html>
|
@@ -161,134 +89,163 @@
|
|
161
89
|
var localeSelectorEl = document.getElementById('locale-selector');
|
162
90
|
var calendarEl = document.getElementById('calendar');
|
163
91
|
|
164
|
-
// fetchを使用してデータを取得
|
165
92
|
fetch('getShifts.php')
|
166
|
-
.then(response => response.json())
|
93
|
+
.then(response => response.json())
|
167
|
-
.then(data => {
|
94
|
+
.then(data => {
|
168
|
-
var calendar = new FullCalendar.Calendar(calendarEl, {
|
95
|
+
var calendar = new FullCalendar.Calendar(calendarEl, {
|
169
|
-
|
170
|
-
//ツールバー
|
171
|
-
headerToolbar: {
|
96
|
+
headerToolbar: {
|
172
|
-
left: 'prev,next today',
|
97
|
+
left: 'prev,next today',
|
173
|
-
center: 'title',
|
98
|
+
center: 'title',
|
174
|
-
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
99
|
+
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
175
|
-
},
|
100
|
+
},
|
176
|
-
|
177
|
-
//表示文字(日本語変換)
|
178
|
-
buttonText: {
|
101
|
+
buttonText: {
|
179
|
-
prev: '先月',
|
102
|
+
prev: '先月',
|
180
|
-
next: '来月',
|
103
|
+
next: '来月',
|
181
|
-
today: '今日',
|
104
|
+
today: '今日',
|
182
|
-
dayGridMonth: '月',
|
105
|
+
dayGridMonth: '月',
|
183
|
-
timeGridWeek: '週',
|
106
|
+
timeGridWeek: '週',
|
184
|
-
timeGridDay: '日',
|
107
|
+
timeGridDay: '日',
|
185
|
-
listMonth: 'リスト',
|
108
|
+
listMonth: 'リスト',
|
186
|
-
},
|
109
|
+
},
|
187
|
-
|
188
|
-
locale: 'ja',
|
110
|
+
locale: 'ja',
|
111
|
+
timeFormat: 'HH:mm',
|
189
|
-
|
112
|
+
timezone: 'Asia/Tokyo',
|
113
|
+
eventLimit: true,
|
114
|
+
buttonIcons: false,
|
190
|
-
navLinks: true,
|
115
|
+
navLinks: true,
|
191
|
-
editable: true,
|
116
|
+
editable: true,
|
192
|
-
dayMaxEvents: true,
|
117
|
+
dayMaxEvents: true,
|
193
|
-
|
118
|
+
slotEventOverlap: true,
|
119
|
+
selectable: true,
|
120
|
+
selectHelper: true,
|
121
|
+
selectMinDistance: 1,
|
194
|
-
plugins: ['dayGrid', 'interaction'],
|
122
|
+
plugins: ['dayGrid', 'interaction'],
|
195
|
-
initialView: 'dayGridMonth',
|
123
|
+
initialView: 'dayGridMonth',
|
196
|
-
events: function(
|
124
|
+
events: function(start, end, timezone, callback) {
|
197
|
-
// カレンダーデータ取得JSを呼ぶ
|
125
|
+
// ***** ここでカレンダーデータ取得JSを呼ぶ *****
|
126
|
+
setCalendarList(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), callback);
|
127
|
+
},
|
128
|
+
eventClick: function(calEvent, jsEvent, view) {
|
129
|
+
// カレンダーに設定したイベントクリック時のイベント
|
130
|
+
},
|
131
|
+
dayClick: function(date, jsEvent, view) {
|
132
|
+
// カレンダー空白部分クリック時のイベント
|
133
|
+
},
|
134
|
+
select: function(start, end) {
|
135
|
+
// カレンダー空白部分をドラッグして範囲指定した時のイベント
|
136
|
+
},
|
198
|
-
|
137
|
+
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
|
199
|
-
|
138
|
+
// イベントをドラッグして別日に移動させた時のイベント
|
139
|
+
}
|
200
140
|
});
|
141
|
+
|
142
|
+
calendar.render();
|
201
|
-
}
|
143
|
+
})
|
202
|
-
|
203
|
-
|
144
|
+
.catch(error => {
|
204
|
-
alert('Event: ' + info.event.title);
|
205
|
-
},
|
206
|
-
|
207
|
-
dateClick: function(info) { // カレンダー空白部分クリック時のイベント
|
208
|
-
|
145
|
+
console.error('Error fetching data:', error);
|
209
|
-
},
|
210
|
-
|
211
|
-
editable: true, // イベントをドラッグ可能にする
|
212
|
-
|
213
|
-
eventDrop: function(info) { // イベントをドラッグして別日に移動させた時のイベント
|
214
|
-
alert('Event moved to: ' + info.event.start.toLocaleString());
|
215
|
-
}
|
216
|
-
});
|
146
|
+
});
|
217
|
-
|
218
|
-
calendar.render();
|
219
|
-
})
|
220
|
-
.catch(error => {
|
221
|
-
console.error('Error fetching data:', error);
|
222
147
|
});
|
148
|
+
|
149
|
+
/**
|
150
|
+
* 対象日付スケジュールデータセット処理
|
151
|
+
* @param {string} startDate - 開始日付
|
152
|
+
* @param {string} endDate - 終了日付
|
153
|
+
* @param {function} callback - コールバック関数
|
154
|
+
* @returns {undefined}
|
155
|
+
*/
|
156
|
+
function setCalendarList(startDate, endDate, callback) {
|
157
|
+
$.ajax({
|
158
|
+
type: 'post',
|
159
|
+
dataType: "json", // 取得するデータの型が JSON であることを指定
|
160
|
+
async: true,
|
161
|
+
cache: false,
|
162
|
+
url: 'getScheduleList.php', // getScheduleList を実行する URL を指定
|
163
|
+
data: { // リクエストパラメータとして startDate と endDate を渡す
|
164
|
+
startDate: startDate,
|
165
|
+
endDate: endDate
|
166
|
+
}
|
167
|
+
})
|
168
|
+
.then(
|
169
|
+
function(data) {
|
170
|
+
var events = [];
|
171
|
+
|
172
|
+
// 取得したデータをフルカレンダーのイベント形式に整形
|
173
|
+
$.each(data, function(index, value) {
|
174
|
+
events.push({
|
175
|
+
id: value['id'],
|
176
|
+
title: value['title'],
|
177
|
+
description: value['description'],
|
178
|
+
start: value['start'],
|
179
|
+
end: value['end'],
|
180
|
+
color: value['color'],
|
181
|
+
textColor: value['textColor']
|
223
|
-
});
|
182
|
+
});
|
183
|
+
});
|
184
|
+
|
185
|
+
// コールバック関数にイベントを渡す
|
186
|
+
callback(events);
|
187
|
+
}
|
188
|
+
);
|
189
|
+
|
190
|
+
return;
|
191
|
+
}
|
192
|
+
|
224
193
|
```
|
225
194
|
|
226
195
|
```getShifts.php
|
227
196
|
<?php
|
228
|
-
// データベース接続
|
197
|
+
// 必要に応じて、データベース接続情報を設定します
|
229
198
|
$servername = "localhost";
|
230
|
-
$username = "
|
199
|
+
$username = "";
|
231
|
-
$password = "パス
|
200
|
+
$password = "パス";
|
232
|
-
$dbname = "
|
201
|
+
$dbname = "データ";
|
202
|
+
|
233
|
-
|
203
|
+
// MySQLへの接続を確立します
|
234
204
|
$conn = new mysqli($servername, $username, $password, $dbname);
|
235
205
|
|
236
|
-
// 接続エラーチェック
|
206
|
+
// 接続エラーをチェックします
|
237
207
|
if ($conn->connect_error) {
|
238
208
|
die("Connection failed: " . $conn->connect_error);
|
239
209
|
}
|
240
210
|
|
241
|
-
//
|
211
|
+
// スケジュールデータを取得するクエリを定義します
|
242
|
-
$sql = "SELECT
|
212
|
+
$sql = "SELECT id, title, description, start_date, start_time, end_date, end_time, calendar_color, calendar_text_color FROM schedules WHERE start_date >= ? AND end_date <= ?";
|
243
|
-
$
|
213
|
+
$stmt = $conn->prepare($sql);
|
244
|
-
|
214
|
+
|
245
|
-
//
|
215
|
+
// パラメータをバインドします
|
216
|
+
$startDate = $_GET['startDate'] ?? date('Y-m-d');
|
217
|
+
$endDate = $_GET['endDate'] ?? date('Y-m-d');
|
218
|
+
$stmt->bind_param("ss", $startDate, $endDate);
|
219
|
+
|
220
|
+
// クエリを実行します
|
246
|
-
$s
|
221
|
+
$stmt->execute();
|
247
|
-
|
222
|
+
$result = $stmt->get_result();
|
223
|
+
|
248
|
-
// クエリ結果を配列に格納
|
224
|
+
// クエリ結果を配列に格納します
|
249
|
-
|
225
|
+
$scheduleList = [];
|
250
|
-
|
226
|
+
while ($row = $result->fetch_assoc()) {
|
251
|
-
|
227
|
+
$scheduleList[] = [
|
252
|
-
|
228
|
+
'id' => $row['id'],
|
253
|
-
|
229
|
+
'title' => $row['title'],
|
230
|
+
'description' => $row['description'],
|
254
|
-
|
231
|
+
'start' => $row['start_date'] . (!empty($row['start_time']) ? " " . $row['start_time'] : " 00:00"),
|
255
|
-
|
232
|
+
'end' => $row['end_date'] . (!empty($row['end_time']) ? " " . $row['end_time'] : " 23:59"),
|
233
|
+
'color' => $row['calendar_color'],
|
234
|
+
'textColor' => $row['calendar_text_color']
|
256
|
-
|
235
|
+
];
|
257
|
-
$shifts[] = $shift;
|
258
|
-
|
236
|
+
}
|
259
|
-
|
237
|
+
|
260
|
-
|
261
|
-
// 接続を閉じ
|
238
|
+
// データベース接続を閉じます
|
239
|
+
$stmt->close();
|
262
240
|
$conn->close();
|
263
241
|
|
264
|
-
// レスポンス
|
242
|
+
// JSON形式でレスポンスを返します
|
265
243
|
header('Content-Type: application/json');
|
266
|
-
|
267
|
-
// シフトデータをJSON形式で出力
|
268
|
-
echo json_encode($shi
|
244
|
+
echo json_encode($scheduleList);
|
269
245
|
?>
|
270
246
|
```
|
271
247
|
|
272
|
-
|
248
|
+
|
273
|
-
ptjs_の中にある
|
274
|
-
shiftsテーブル
|
275
|
-
1 shift_id 主 int(11) シフトID AUTO_INCREMENT
|
276
|
-
2 employee_id インデックス int(11) 従業員ID
|
277
|
-
3 title varchar(225) utf8mb4_general_ci 予定タイトル
|
278
|
-
4 description varchar(255) utf8mb4_general_ci 予定詳細
|
279
|
-
5 calendar_color varchar(255) utf8mb4_general_ci カレンダー背景色
|
280
|
-
6 calendar_text_color varchar(255) utf8mb4_general_ci カレンダー文字色
|
281
|
-
7 start_date date 開始日
|
282
|
-
8 start_time time 開始時間
|
283
|
-
9 end_date date 終了日
|
284
|
-
10 end_time time 終了時間
|
285
|
-
11 workstation varchar(50) utf8mb4_general_ci 持ち場
|
286
|
-
12 is_deleted tinyint(1) 0 削除フラグ(0:有効 / 1:削除済み)
|
287
|
-
13 created datetime データ作成日
|
288
|
-
14 created_user_id int(11) データ作成者
|
289
|
-
15 modified datetime データ更新日
|
290
|
-
16 modified_user_id int(11) データ更新者
|
291
|
-
```
|
292
249
|
|
293
250
|
### 試したこと・調べたこと
|
294
251
|
- [x] teratailやGoogle等で検索した
|
3
calendar.js
test
CHANGED
File without changes
|
test
CHANGED
@@ -157,58 +157,70 @@
|
|
157
157
|
|
158
158
|
```calendar.js
|
159
159
|
document.addEventListener('DOMContentLoaded', function() {
|
160
|
-
|
160
|
+
var initialLocaleCode = 'ja';
|
161
|
-
|
161
|
+
var localeSelectorEl = document.getElementById('locale-selector');
|
162
|
-
|
162
|
+
var calendarEl = document.getElementById('calendar');
|
163
|
+
|
163
|
-
|
164
|
+
// fetchを使用してデータを取得
|
165
|
+
fetch('getShifts.php')
|
166
|
+
.then(response => response.json())
|
167
|
+
.then(data => {
|
164
|
-
var calendar = new FullCalendar.Calendar(calendarEl, {
|
168
|
+
var calendar = new FullCalendar.Calendar(calendarEl, {
|
165
|
-
|
169
|
+
|
166
|
-
//ツールバー
|
170
|
+
//ツールバー
|
167
|
-
headerToolbar: {
|
171
|
+
headerToolbar: {
|
168
|
-
left: 'prev,next today',
|
172
|
+
left: 'prev,next today',
|
169
|
-
center: 'title',
|
173
|
+
center: 'title',
|
170
|
-
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
174
|
+
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
175
|
+
},
|
176
|
+
|
177
|
+
//表示文字(日本語変換)
|
178
|
+
buttonText: {
|
179
|
+
prev: '先月',
|
180
|
+
next: '来月',
|
181
|
+
today: '今日',
|
182
|
+
dayGridMonth: '月',
|
183
|
+
timeGridWeek: '週',
|
184
|
+
timeGridDay: '日',
|
185
|
+
listMonth: 'リスト',
|
186
|
+
},
|
187
|
+
|
188
|
+
locale: 'ja',
|
189
|
+
buttonIcons: false, // show the prev/next text
|
190
|
+
navLinks: true, // can click day/week names to navigate views
|
191
|
+
editable: true,
|
192
|
+
dayMaxEvents: true, // allow "more" link when too many events
|
193
|
+
|
194
|
+
plugins: ['dayGrid', 'interaction'],
|
195
|
+
initialView: 'dayGridMonth',
|
196
|
+
events: function(fetchInfo, successCallback, failureCallback) {
|
197
|
+
// カレンダーデータ取得JSを呼ぶ
|
198
|
+
setCalendarList(fetchInfo.startStr, fetchInfo.endStr, function(events) {
|
199
|
+
successCallback(events);
|
200
|
+
});
|
171
201
|
},
|
172
202
|
|
173
|
-
//表示文字(日本語変換)
|
174
|
-
buttonText: {
|
175
|
-
prev: '先月',
|
176
|
-
next: '来月',
|
177
|
-
today: '今日',
|
178
|
-
dayGridMonth: '月',
|
179
|
-
timeGridWeek: '週',
|
180
|
-
timeGridDay: '日',
|
181
|
-
listMonth: 'リスト',
|
182
|
-
},
|
183
|
-
|
184
|
-
locale: 'ja',
|
185
|
-
buttonIcons: false, // show the prev/next text
|
186
|
-
navLinks: true, // can click day/week names to navigate views
|
187
|
-
editable: true,
|
188
|
-
dayMaxEvents: true, // allow "more" link when too many events
|
189
|
-
|
190
|
-
plugins: ['dayGrid', 'interaction'],
|
191
|
-
initialView: 'dayGridMonth',
|
192
|
-
events: 'getShifts.php', // カレンダーデータ取得イベント
|
193
|
-
|
194
203
|
eventClick: function(info) { // イベントクリック時のイベント
|
195
204
|
alert('Event: ' + info.event.title);
|
196
205
|
},
|
197
|
-
|
206
|
+
|
198
207
|
dateClick: function(info) { // カレンダー空白部分クリック時のイベント
|
199
208
|
alert('Clicked on: ' + info.dateStr);
|
200
209
|
},
|
201
|
-
|
210
|
+
|
202
211
|
editable: true, // イベントをドラッグ可能にする
|
203
|
-
|
212
|
+
|
204
213
|
eventDrop: function(info) { // イベントをドラッグして別日に移動させた時のイベント
|
205
214
|
alert('Event moved to: ' + info.event.start.toLocaleString());
|
206
215
|
}
|
207
216
|
});
|
208
|
-
|
217
|
+
|
209
218
|
calendar.render();
|
210
|
-
|
219
|
+
})
|
220
|
+
.catch(error => {
|
221
|
+
console.error('Error fetching data:', error);
|
211
|
-
|
222
|
+
});
|
223
|
+
});
|
212
224
|
```
|
213
225
|
|
214
226
|
```getShifts.php
|
2
誤字
test
CHANGED
File without changes
|
test
CHANGED
@@ -259,7 +259,7 @@
|
|
259
259
|
|
260
260
|
```mysql
|
261
261
|
ptjs_の中にある
|
262
|
-
shifts
|
262
|
+
shiftsテーブル
|
263
263
|
1 shift_id 主 int(11) シフトID AUTO_INCREMENT
|
264
264
|
2 employee_id インデックス int(11) 従業員ID
|
265
265
|
3 title varchar(225) utf8mb4_general_ci 予定タイトル
|
1
誤字、追加分
test
CHANGED
File without changes
|
test
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
### 発生している問題・分からないこと
|
5
5
|
fullcalendrの表示や細かい設定(日本語にしたり)はできたのですがカレンダーにmysqlのシフトのデータを表示させたいのですがうまくいきません。
|
6
|
-
現状のコードだとカレンダーが表示されなくなってしまっています。
|
6
|
+
現状のコードだとカレンダー自体が表示されなくなってしまっています。
|
7
7
|
|
8
8
|
|
9
9
|
|
@@ -295,7 +295,7 @@
|
|
295
295
|
windows10 XAMPP VScode GoogleChrome
|
296
296
|
を使っています。
|
297
297
|
|
298
|
-
第三者にわかりやすく説明することが苦手でわかりずらいかもしれませんがよろしくお願いします。(何かありましたら気軽に質問してください)
|
298
|
+
第三者にわかりやすく説明することが苦手でわかりずらいかもしれませんがよろしくお願いします。(何かありましたら気軽に質問してください)。また逆にここは載せない方がいいよというところがありましたら教えていただければ幸いです。
|
299
299
|
HTML/CSS,PHP,JSを使ってバイトのシフト管理アプリを作ろうと思っています。
|
300
300
|
ですがまだプログラミングを始めたばかりでわからないことだらけですのでご教授お願い致します。
|
301
301
|
ほかにログイン用のlogin.phpもありますが文字数的にと影響はないと思ったので省いています。
|