fullcalendarver5でイベントが登録できない

データ登録を押しても登録ができません。

index.php

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>カレンダー</title>
    <link href='../lib/main.css' rel='stylesheet' />
    <script src='../lib//main.js'></script>
    <script>

        //グローバル変数
        var global_fullcalendar_event = null;
        var default_ymd_format = 'YYYY-MM-DD HH:mm';

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

          defaultView: 'month',
          locale: 'ja',

          heder: {
            left: 'prev,next today',
            center: 'title',

            right: 'month,agendaWeek,agendaDay'
          },

            editable: true,
            eventLimit: true,

            selectable: true,
            selectHelper: true,
            select: function(start, end) {
                //var title = prompt("イベント名");
                $('#edit_time').show();

                $('#title').val('');
                $('#start').val(start.format(default_ymd_format));
                $('end').val(end.format(default_ymd_format));

                //他のイベントと被らないように
                global_fullcalendar_event = null;
            },

            //イベントクリックした時の処理
            eventClick: function(event) {
                //タイトル表示
                    //alert(event.title);

                    //URLが書いていれば開く
                    if(event.url) {

                    }
                    global_fullcalendar_event = event;

                    $('#edit_time').show();

                    if(event.id != undefined) console.log(event.id);
                    else console.log('event.id is undefined');

                    $('#title').val(event.title);
                    $('#start').val(event.start.format(default_ymd_format));
                    $('end').val(event.end.format(default_ymd_format));
            },
            

            //イベント（予定）はここに書く
            events: {
                //データベースから予定を読み込む
                url: './php/read.php',
                //読み込むエラー時の表示
                error: function(){
                    console.log("read error!");
                    $('#read-error').show();
                },
            },

            
            //時間フォーマット
            timeFormat: 'HH:mm',
            //イベント表示中には必ず実行
            eventReader:function(event, element,view) {

            //全イベントを表示
            allevents = $('#calendar').fullCalendar('clientEvents');
            var json = JSON.stringify(allevents.map(function(e) {
                return {
                    id: e.id,
                    start: e.start.format(default_ymd_format),
                    end: e.end.format(default_ymd_format),
                    title: e.title
                };
            }));
            console.log(json);
        },

        //イベント削除時のアニメーション非表示
        dragRevertDuration: 0,
        //イベント削除　ゴミ箱にドラッグ
        eventDragStop: function(event, jsEvent, ui, view) {
            //ゴミ箱
            var trashcan = $('#trashcan');
            //ゴミ箱の位置
            var ofs = trashcan.offset();

            //ゴミ箱に捨てれたか
            if((ofs.left <= jsEvent.pageX)&&(jsEvent.pageX<=ofs.left + trashcan.outerWidth(true))&&
            (ofs.top <= jsEvent.pageY)&&(jsEvent.pageY <=ofs.top + trashcan.outerHeight(true))) {
                if(confirm('「'+event.title+'」('+event.id+')捨てますよ？')) {

                //event.idの設定がない場合
                if(event.id == undefined) id =event._id;      //内部_idを利用
                else id=event.id;                             //event.idの設定がある場合はそれを利用

                $('#calendar').fullCalendar('removeEvents' , id);

                jqxhr = $.post('./php/delete.php', {id: event.id});
                }
            }
        }




        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>


    <p>
        <div id="trashcan" style="border: solid; border-color: black;
        width: 50px; height: 50px; background: green; color: white;">ゴミ箱</div>
    </p>
    <hr>
    <div id="edit_time" style="display:none; border: solid;">
    イベント名：<input id="title" type="text"><br>
    開始日時：<input id="start" type="text" size="48"><br>
    終了日時：<input id="end" type="text"size="48"><br>

    <p>
        <input id="edit_time_submit" type="submit" value="時間登録！"><br>
        <input id="edit_time_hide" type="button" value="閉じる" onclick="$('#edit_time').hide()">
    </p>
    </div>
    <p>
       <input id="submit" type="submit" value="データ登録！">     
    </p>
    <div id="response"></div>


    <script>
       $('#edit_time_submit').click(function(eventClickInfo) {
            var fullcalendar_event;

            fullcalendar_event = {
                title: $('#title').val(),
                start: $('#start').val(),
                end: $('#end').val()
            };

            if(global_fullcalendar_event === null) {
                $('#calendar').fullCalendar('renderEvent' , fullcalendar_event, true);
            } else {
                global_fullcalendar_event.title = $('#title').var();
                global_fullcalendar_event.start = $('#start').var();
                global_fullcalendar_event.end = $('#end').val();
                $('#calendar').fullCalendar('updateEvent' , global_fullcalendar_event);

                global_fullcalendar_event = null;
            }
        });

        $('#submit').click(function(eventClickInfo) {
            alert("データ登録開始！");
            allevents =$('#calendar').fullCalendar('clientEvents');

            var json = JSON.stringify(allevents.map(function(e) {
                return {
                    id: e.id,
                    start: e.start.format(default_ymd_format),
                    end: e.end.format(default_ymd_format),
                    tittle: e.title
                };
            }));

            var jqxhr = $.ajax({
                type: 'POST',
                url: './php/update.php',
                data: {'allevents': json},
                success: function(output) {

                },
                error: function(request, status, error) {
                    alert('PHP Error!\n' + status + '\n' + error);
                }
            });
            jqxhr.done(function (result) {
                $('#response').html(result);
            });
        });
    </script>
  </body>
</html>

read.php

<?php
    require "database.php";

    $range_start = parseDateTime(htmlspecialchars($_GET['start'], ENT_QUOTES), $default_timezone);
    $range_end = parseDateTime(htmlspecialchars($_GET['end'], ENT_QUOTES), $default_timezone);

    $sql = "SELECT * FROM" .$table_name;

    $event_array = array();
    $query_ret = mysqli_query($db, $sql);
    while($array ~ mysqli_fetch_assoc($query_ret)) {
        $event = new Event($array, $default_timezone);

        if ($event->isWithinDayRange($range_start, $range_end)) {
            $event_array[] = $event->toArray();
        }
    }

    mysqli_close($db);

    echo json_encode($event_array);

?>

update.php

<?php
    require "database.php";

    echo "update.phpの処理結果<br>\n";

    $json = json_decode($_POST['allevents']);

    echo "登録開始！・・・";
    foreach($json as $array) {
        if(!property_exists($array, 'id')) {
            $sql = "INSERT INTO" . $table_name . "(start, end, title) VALUES(";
            $sql .= '"' . $array->start . '", "' . $array->end . '", "' . $array->tittle . '"'; $sql .=')'; 
        } else {
            $sql = "INSERT INTO" . $table_name . "(id, start, end, title) VALUES(";
            $sql .= $array->id . ',"' . $array->start . '","' . $array->end . '","' . $array->title . '"';
            $sql .= ') ON DUPLICATE KEY UPDATE';
            $sql .= 'start=VALUES(start), end=VALUES(end), tittle=VALUES(tittle)'; 
        }

        echo $sql . "<br>\n";
        $query_ret = mysqli_query($db, $sql); 
    }
    echo count($json) . "件登録終了\n";

    mysqli_close($db);

?>

delete.php

<?php
    require "database.php";

    $id = htmlspecialchars($_POST['id'], ENT_QUOTES);

    $sql = "DELETE FROM" . $table_name . ' WHERE id=' . $id;

    $query_ret = mysqli_query($db, $sql);

    mysqli_close($db);

?>

database.php

<?php
    $default_timezone_str = 'Asia/Tokyo';
    date_default_timezone_set($default_timezone_str);
    $default_timezone = new DataTImeZone($default_timezone_str);

    require dirname(__FILE__) . '/utils.php';

    $host_name = 'localhost';

    $database_name = "schedule";

    $table_name = 'contents';

    $username = "root";
    $password ="";

    $db = mysqli_connect($host_name, $username, $password . $database_name) or die('Cannot connect MYSQL and DATABASE in it!');
    mysqli_set_charset($db, 'utf8');

?>

実行した結果です

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

回答1件

机上デバッグ（目視によるチェック）で気づいたところなど。

read.phpにおける、
while($array ~ mysqli_fetch_assoc($query_ret)) はもしかして
while($array = mysqli_fetch_assoc($query_ret)) のタイプミスではないですか？
機械的な文法チェックでは検出されない潜在的なミスではありますが。

それと、作法的（プログラミングスタイル的）な、致命的ではないけど直したほうがいい点もあります。

$_GETや$_POSTを変数に格納する際には、
htmlspecialchars()を使ってはいけません。
htmlとして出力する際に文字化けを産まないようにするための関数ですから、
データベースに格納する際にエンコードされた状態で保存されると扱いがかえって面倒になります。
PHP で h() を書くなら一緒に echo しよう。 - こせきの技術日記
をご一読ください。

それと、すべてのSQL文が文字列連結で作っているのは危険です。
PHPでデータベースに接続するときのまとめ - Qiita
をご一読の上、プリペアドステートメントとプレースホルダを駆使するやり方を学んでください。
SQLインジェクション対策になりますし。
より安全にデータベースアクセスができるようになります。

投稿2021/12/02 03:05