質問編集履歴

4

php、js

2024/04/03 14:54

投稿

Umi_0w0
Umi_0w0

スコア5

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>&copy; 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
- buttonIcons: false, // show the prev/next text
112
+ timezone: 'Asia/Tokyo',
113
+ eventLimit: true,
114
+ buttonIcons: false,
190
- navLinks: true, // can click day/week names to navigate views
115
+ navLinks: true,
191
- editable: true,
116
+ editable: true,
192
- dayMaxEvents: true, // allow "more" link when too many events
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(fetchInfo, successCallback, failureCallback) {
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
- setCalendarList(fetchInfo.startStr, fetchInfo.endStr, function(events) {
137
+ eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
199
- successCallback(events);
138
+ // イベントをドラッグして別日に移動させた時のイベント
139
+ }
200
140
  });
141
+
142
+ calendar.render();
201
- },
143
+ })
202
-
203
- eventClick: function(info) { // イベントクリック時のイベント
144
+ .catch(error => {
204
- alert('Event: ' + info.event.title);
205
- },
206
-
207
- dateClick: function(info) { // カレンダー空白部分クリック時のイベント
208
- alert('Clicked on: ' + info.dateStr);
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 = "ptjs_";
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 employee_id, title, start_date, start_time, end_date, end_time FROM shifts WHERE is_deleted = 0";
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
- $result = $conn->query($sql);
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
- $shifts = array();
221
+ $stmt->execute();
247
-
222
+ $result = $stmt->get_result();
223
+
248
- // クエリ結果を配列に格納
224
+ // クエリ結果を配列に格納します
249
- if ($result->num_rows > 0) {
225
+ $scheduleList = [];
250
- while($row = $result->fetch_assoc()) {
226
+ while ($row = $result->fetch_assoc()) {
251
- $shift = array(
227
+ $scheduleList[] = [
252
- 'id' => $row['employee_id'],
228
+ 'id' => $row['id'],
253
- 'title' => $row['title'],
229
+ 'title' => $row['title'],
230
+ 'description' => $row['description'],
254
- 'start' => $row['start_date'] . 'T' . $row['start_time'],
231
+ 'start' => $row['start_date'] . (!empty($row['start_time']) ? " " . $row['start_time'] : " 00:00"),
255
- 'end' => $row['end_date'] . 'T' . $row['end_time']
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($shifts);
244
+ echo json_encode($scheduleList);
269
245
  ?>
270
246
  ```
271
247
 
272
- ```mysql
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

2024/04/03 07:38

投稿

Umi_0w0
Umi_0w0

スコア5

test CHANGED
File without changes
test CHANGED
@@ -157,58 +157,70 @@
157
157
 
158
158
  ```calendar.js
159
159
  document.addEventListener('DOMContentLoaded', function() {
160
- var initialLocaleCode = 'ja';
160
+ var initialLocaleCode = 'ja';
161
- var localeSelectorEl = document.getElementById('locale-selector');
161
+ var localeSelectorEl = document.getElementById('locale-selector');
162
- var calendarEl = document.getElementById('calendar');
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

誤字

2024/04/02 13:51

投稿

Umi_0w0
Umi_0w0

スコア5

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

誤字、追加分

2024/04/02 13:50

投稿

Umi_0w0
Umi_0w0

スコア5

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もありますが文字数的にと影響はないと思ったので省いています。