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

Question

実現したいこと

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

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

fullcalenderにMySQLのシフトデータをカレンダー上に表示させたいのですが途中でエラーが発生しました。

エラーメッセージ

Error fetching data: TypeError: e is not iterable
    at i (index.global.min.js:6:145454)
    at i (index.global.min.js:6:145501)
    at index.global.min.js:6:147918
    at ha.buildPluginHooks (index.global.min.js:6:147930)
    at ha.processRawCalendarOptions (index.global.min.js:6:166590)
    at ha.computeOptionsData (index.global.min.js:6:165940)
    at new ha (index.global.min.js:6:160996)
    at new e.Calendar (index.global.min.js:6:279010)
    at calender.js:7:22

該当のソースコード

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  fetch('getShifts.php')
    .then(response => response.json())
    .then(data => {
      var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        buttonText: {
          prev: '先月',
          next: '来月',
          today: '今日',
          dayGridMonth: '月',
          timeGridWeek: '週',
          timeGridDay: '日',
          listMonth: 'リスト',
        },
        locale: 'ja',
        timeZone: 'Asia/Tokyo',
        eventLimit: true,
        navLinks: true,
        editable: true,
        dayMaxEvents: true, // for all non-TimeGrid views
        views: {
          timeGrid: {
            dayMaxEventRows: 4 // adjust to 6 only for timeGridWeek/timeGridDay
          }
        },
        selectable: true,
        plugins: ['dayGrid', 'timeGrid', 'interaction', 'list'],
        initialView: 'dayGridMonth',
        events: function(info, successCallback, failureCallback) {
          // infoオブジェクトを使用して日付の範囲を取得
          setCalendarList(info.startStr, info.endStr, successCallback);
        },
        eventClick: function(info) {
          // カレンダーに設定したイベントクリック時のイベント
        },
        dateClick: function(info) {
          // カレンダー空白部分クリック時のイベント
        },
        select: function(info) {
          // カレンダー空白部分をドラッグして範囲指定した時のイベント
        },
        eventDrop: function(info) {
          // イベントをドラッグして別日に移動させた時のイベント
        }
      });

      calendar.render();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
});

/**
 * 対象日付スケジュールデータセット処理
 * @param {string} startStr - 開始日付
 * @param {string} endStr - 終了日付
 * @param {function} successCallback - 成功時のコールバック関数
 * @returns {undefined}
 */
function setCalendarList(startStr, endStr, successCallback) {
  $.ajax({
    type: 'post',
    dataType: "json",
    async: true,
    cache: false,
    url: 'getShifts.php',
    data: {
      startDate: startStr,
      endDate: endStr
    }
  })
  .then(function(data) {
    var events = [];

    // 取得したデータをフルカレンダーのイベント形式に整形
    $.each(data, function(index, value) {
      events.push({
        id: value['shift_id'],
        title: value['title'],
        description: value['description'],
        start: value['start'],
        end: value['end'],
        color: value['color'],
        textColor: value['textColor']
      });
    });

    // 成功時のコールバック関数にイベントを渡す
    successCallback(events);
  })
  .catch(error => {
    console.error('Error in setCalendarList:', error);
    // 失敗時の処理をここに記述することもできます
  });

  return;
}

<?php
// データベースの設定情報を定義します。
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";

// PDOを使用してデータベースに接続します。
// PDOはエラー処理やセキュリティ（プリペアドステートメント）などの面でmysqliより推奨されます。
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // エラーモードを例外モードに設定
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

// スケジュールデータを取得するクエリを定義します。
$sql = "SELECT shift_id, title, description, start_date, start_time, end_date, end_time, calendar_color, calendar_text_color FROM shifts WHERE start_date >= :startDate AND end_date <= :endDate";

// パラメータをバインドしてクエリを実行します。
$startDate = $_GET['startDate'] ?? date('Y-m-d');
$endDate = $_GET['endDate'] ?? date('Y-m-d');
$stmt = $conn->prepare($sql);
$stmt->bindParam(':startDate', $startDate);
$stmt->bindParam(':endDate', $endDate);
$stmt->execute();

// クエリ結果を配列に格納します。
$scheduleList = $stmt->fetchAll(PDO::FETCH_ASSOC);

// データベース接続を閉じます（PDOでは接続閉じる必要は基本的にありませんが、明示的に閉じたい場合はnullを代入します）
$conn = null;

// JSON形式でレスポンスを返します。
header('Content-Type: application/json');
echo json_encode($scheduleList);
?>

<?PHP
session_start();

// ログイン済みかどうかを確認
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: ../login/login.php");
    exit;
}


//データベース接続　龍の目
require('../dbconnect.php');

// ユーザー情報の取得クエリ
$sql = "SELECT e.name, r.role_name
        FROM employees e
        JOIN roles r ON e.role_id = r.role_id
        WHERE e.employee_code = ?";

if($stmt = $db->prepare($sql)){
    
    // パラメータをバインド
    $employee_code = $_SESSION["employee_code"]; 
    $stmt->bindParam(1, $employee_code, PDO::PARAM_STR);

    // クエリの実行
    if($stmt->execute()){
        // 結果を取得
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        if ($row) {
            $name = $row['name'];
            $role = $row['role_name'];
        }
    } 
}
// データベース接続を閉じる
$db = null;
?>




<!DOCTYPE html>
<html lang="ja" class="is-overflow">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ログインページ</title>
    <link rel="stylesheet" href="index02.css">
    <script src="calender.js"></script>
    
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>


</head>

<body>
<div class="htmlContainer">
<!-- header -->
    <main>
        <div class="container">
            <h1>スケジュール</h1>
        </div>
        <div id="cale" style="padding: 10px 10px;">
        <div id='calendar'></div>
        </div>
    </main>
</div>
</body>
</html>

試したこと・調べたこと

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

上記の詳細・結果

エラーコードとかを調べましたが見つけられませんでした。

補足

windows XAMPP vscode

まだプログラミング始めたばかりで色々いたらない点もありますがご教授願います。
もっと詳細な情報が必要な場合はどうぞご気軽にコメントしてください。
よろしくお願いします.

Comments

[Lhankor_Mhy]

plugins の行を削除するとどうなりますか？

Answer 1

plugins オプションですが、ドキュメントを見ると、
ビルドする場合と、
Initialize with ES6 Build System - Docs | FullCalendar
ESモジュールを使う場合は、
Initialize with Script Tags (ESM) - Docs | FullCalendar
とそれぞれ、インポートして配列にして渡す形式になっています。

CDNなどを使う場合は、
Initialize with Script Tags - Docs | FullCalendar
と、plugins に値を設定せずに、プラグインのスクリプトをscript要素でグローバルに読み込む形式になっているようです。

ご提示のコードでは、plugins: ['dayGrid', 'timeGrid', 'interaction', 'list']と文字列の配列を渡していますから、ドキュメントと違うことをしているようです。
この記述が正しいのか、確認されてみてはいかがでしょうか。

---

もう少しドキュメントを眺めてみたところ、pluginsに文字列の配列を渡す形は、古いバージョンであったようです。
Initialize with Script Tags - Docs v4 | FullCalendar
ですので、使われているバージョンを再度確認してみてはどうでしょうか。

Comments

[Umi_0w0]

回答ありがとうございます。
申し訳ありません、アルバイトがあったので返信が遅くなりました。
後で時間ができ次第確認し返答させていただきます。
調べていただきありがとうございます。

[Umi_0w0]

回答ありがとうございます。
バージョンの確認や少し試行錯誤したら正常に動きましたありがとうございました。

ベストアンサーに選ばせていただきました。

[Lhankor_Mhy]

ご解決されて何よりです。