fullcalenderにMySQLのシフトデータをカレンダー上に表示させたい

実現したいこと

fullcarenderにMySQLのシフトデータをカレンダー上に表示させたい

発生している問題・分からないこと

fullcalendrの表示や細かい設定(日本語にしたり)はできたのですがカレンダーにmysqlのシフトのデータを表示させたいのですがうまくいきません。
現状のコードだとカレンダー自体が表示されなくなってしまっています。

該当のソースコード

content.php
1<?PHP
2session_start();
3
4// ログイン済みかどうかを確認
5if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
6    header("location: ../login/login.php");
7    exit;
8}
9
10
11//データベース接続　龍の目
12require('../dbconnect.php');
13
14// ユーザー情報の取得クエリ
15$sql = "SELECT e.name, r.role_name
16        FROM employees e
17        JOIN roles r ON e.role_id = r.role_id
18        WHERE e.employee_code = ?";
19
20if($stmt = $db->prepare($sql)){
21    
22    // パラメータをバインド
23    $employee_code = $_SESSION["employee_code"]; 
24    $stmt->bindParam(1, $employee_code, PDO::PARAM_STR);
25
26    // クエリの実行
27    if($stmt->execute()){
28        // 結果を取得
29        $row = $stmt->fetch(PDO::FETCH_ASSOC);
30        if ($row) {
31            $name = $row['name'];
32            $role = $row['role_name'];
33        }
34    } 
35}
36// データベース接続を閉じる
37$db = null;
38?>
39
40
41
42<!DOCTYPE html>
43<html lang="ja" class="is-overflow">
44<head>
45    <meta charset="UTF-8">
46    <meta name="viewport" content="width=device-width, initial-scale=1.0">
47    <title>ログインページ</title>
48    <link rel="stylesheet" href="index02.css">
49    <script src="calender.js"></script>
50    
51    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js'></script>
52    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
53    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
54    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.0/main.min.js"></script>
55
56</head>
57
58<body>
59<div class="htmlContainer">
60<!-- header -->
61    <main>
62        <div class="container">
63            <h1>スケジュール</h1>
64        </div>
65        <div id="cale" style="padding: 10px 10px;">
66        <div id='calendar'></div>
67        </div>
68    </main>
69</div>
70</body>
71</html>

calendar.js
1document.addEventListener('DOMContentLoaded', function() {
2  var initialLocaleCode = 'ja';
3  var localeSelectorEl = document.getElementById('locale-selector');
4  var calendarEl = document.getElementById('calendar');
5
6  fetch('getShifts.php')
7      .then(response => response.json())
8      .then(data => {
9          var calendar = new FullCalendar.Calendar(calendarEl, {
10              headerToolbar: {
11                  left: 'prev,next today',
12                  center: 'title',
13                  right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
14              },
15              buttonText: {
16                  prev: '先月',
17                  next: '来月',
18                  today: '今日',
19                  dayGridMonth: '月',
20                  timeGridWeek: '週',
21                  timeGridDay: '日',
22                  listMonth: 'リスト',
23              },
24              locale: 'ja',
25              timeFormat: 'HH:mm',
26              timezone: 'Asia/Tokyo',
27              eventLimit: true,
28              buttonIcons: false,
29              navLinks: true,
30              editable: true,
31              dayMaxEvents: true,
32              slotEventOverlap: true, 
33              selectable: true, 
34              selectHelper: true, 
35              selectMinDistance: 1,
36              plugins: ['dayGrid', 'interaction'],
37              initialView: 'dayGridMonth',
38              events: function(start, end, timezone, callback) {
39                // ***** ここでカレンダーデータ取得JSを呼ぶ *****
40                setCalendarList(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), callback);
41             },
42             eventClick: function(calEvent, jsEvent, view) {
43                // カレンダーに設定したイベントクリック時のイベント
44             },
45             dayClick: function(date, jsEvent, view) {
46                // カレンダー空白部分クリック時のイベント
47             },
48             select: function(start, end) {
49                // カレンダー空白部分をドラッグして範囲指定した時のイベント
50             },
51             eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
52                // イベントをドラッグして別日に移動させた時のイベント
53             }
54          });
55
56          calendar.render();
57      })
58      .catch(error => {
59          console.error('Error fetching data:', error);
60      });
61});
62
63/**
64 * 対象日付スケジュールデータセット処理
65 * @param {string} startDate - 開始日付
66 * @param {string} endDate - 終了日付
67 * @param {function} callback - コールバック関数
68 * @returns {undefined}
69 */
70function setCalendarList(startDate, endDate, callback) {
71  $.ajax({
72    type: 'post',
73    dataType: "json", // 取得するデータの型が JSON であることを指定
74    async: true,
75    cache: false,
76    url: 'getScheduleList.php', // getScheduleList を実行する URL を指定
77    data: { // リクエストパラメータとして startDate と endDate を渡す
78      startDate: startDate,
79      endDate: endDate
80    }
81  })
82  .then(
83    function(data) {
84      var events = [];
85
86      // 取得したデータをフルカレンダーのイベント形式に整形
87      $.each(data, function(index, value) {
88        events.push({
89          id: value['id'],
90          title: value['title'],
91          description: value['description'],
92          start: value['start'],
93          end: value['end'],
94          color: value['color'],
95          textColor: value['textColor']
96        });
97      });
98
99      // コールバック関数にイベントを渡す
100      callback(events);
101    }
102  );
103
104  return;
105}
106

getShifts.php
1<?php
2// 必要に応じて、データベース接続情報を設定します
3$servername = "localhost";
4$username = "";
5$password = "パス";
6$dbname = "データ";
7
8// MySQLへの接続を確立します
9$conn = new mysqli($servername, $username, $password, $dbname);
10
11// 接続エラーをチェックします
12if ($conn->connect_error) {
13    die("Connection failed: " . $conn->connect_error);
14}
15
16// スケジュールデータを取得するクエリを定義します
17$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 <= ?";
18$stmt = $conn->prepare($sql);
19
20// パラメータをバインドします
21$startDate = $_GET['startDate'] ?? date('Y-m-d');
22$endDate = $_GET['endDate'] ?? date('Y-m-d');
23$stmt->bind_param("ss", $startDate, $endDate);
24
25// クエリを実行します
26$stmt->execute();
27$result = $stmt->get_result();
28
29// クエリ結果を配列に格納します
30$scheduleList = [];
31while ($row = $result->fetch_assoc()) {
32    $scheduleList[] = [
33        'id' => $row['id'],
34        'title' => $row['title'],
35        'description' => $row['description'],
36        'start' => $row['start_date'] . (!empty($row['start_time']) ? " " . $row['start_time'] : " 00:00"),
37        'end' => $row['end_date'] . (!empty($row['end_time']) ? " " . $row['end_time'] : " 23:59"),
38        'color' => $row['calendar_color'],
39        'textColor' => $row['calendar_text_color']
40    ];
41}
42
43// データベース接続を閉じます
44$stmt->close();
45$conn->close();
46
47// JSON形式でレスポンスを返します
48header('Content-Type: application/json');
49echo json_encode($scheduleList);
50?>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

google等で調べましたがどれも情報が古く現状のヴァージョン対応してなかったり自分の知識不足で理解ができずにいます。

補足

$dbname = "ptjs_";
ここの部分なのですが " " 入れるものはあっていますでしょうか？調べてもデータベース名としか出てこずどれがデータベース名なのと困っています。こちらも併せて教えていただければ幸いです。

環境は
windows10　XAMPP　VScode　GoogleChrome
を使っています。

第三者にわかりやすく説明することが苦手でわかりずらいかもしれませんがよろしくお願いします。（何かありましたら気軽に質問してください）。また逆にここは載せない方がいいよというところがありましたら教えていただければ幸いです。
HTML/CSS,PHP,JSを使ってバイトのシフト管理アプリを作ろうと思っています。
ですがまだプログラミングを始めたばかりでわからないことだらけですのでご教授お願い致します。
ほかにログイン用のlogin.phpもありますが文字数的にと影響はないと思ったので省いています。

行動規範の内容に同意します

回答2件

ドキュメントを見た限りの回答になります。
https://fullcalendar.io/docs/event-object

eventsに設定するのはJSONオブジェクト形式の「データ」であって、
「実行するURL(の文字列)」ではないように思います。

例えばFullCalendarのnewよりも前にfetchなどでgetShifts.phpをWebAPIとして実行してデータを取得しておき、
そのデータをeventsにセットすることで、「実行した結果受け取ったJSONオブジェクトをデータとしてみなす」ことができると思います。

投稿2024/04/02 23:55

編集2024/04/03 05:55

m.ts10806

総合スコア80852

Umi_0w0

2024/04/03 07:40

回答ありがとうございます。試してみましたが解決できませんでした。 FullCalendarのnewよりも前にfetchなどでgetShifts.phpをてデータを取得して実行してみましたがダメでした。そもそも、なぜかカレンダー自体が表示されなくなってしまっています。どの辺りに原因がありそうでしょうか？

m.ts10806

2024/04/03 07:50

responseそのままeventsにセットすればよかったのでは・・コードはどこまで正常に通っていますか？また、ブラウザの開発ツールのコンソールにエラーは出ていませんか？

Umi_0w0

2024/04/03 14:57

回答ありがとうございます。今試行錯誤してこのコードになったのですがやはりだめでした。。。 GoogleChromeで実行後開発ログを見るとこう書いてありました。 Error fetching data: SyntaxError: Unexpected token '<', " <br /> <b>"... is not valid JSON この場合どの辺りに原因がありそうでしょうか？

m.ts10806

2024/04/07 23:24

返却値がJSONの形式になっていないということになります。

行動規範の内容に同意します