fullcalendarが表示しません

index.phpの12行目：$(document).ready(function() と
123行目：$('#edit_time_submit').click(function(event) {
の変数名が定義されていないとでます。

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <tittle>XXXXXXXX</tittle>
        <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).ready(function() {
              $('#calendar').fullCalendar({
                  defaultView: 'month',
                  locale: 'ja',
                  header: {
                      left: 'prev,next today',
                      center: 'title',
                      right: 'month,agendaWeek,agendaDay'
                  },

                  editable: true,
                  eventLimit: true,

                  selectable: true,
                  selectHelper: true,
                  select: function(start, end) {
                    $('#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) {
                      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',

                  loading:function(bool) {
                      $('#loading').toggle(bool);
                  },

                  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+')捨てますよ？')) {
                              if(event.id == undefined) id =event._id;
                              else id=event.id;

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

                              jqxhr = $.post('php/delete.php', {id: event.id});
                          }
                      }
                  }
              });  
            });
        </script>
    </head>
    <body>

        <div id ="read-error" style="display::none">読み込めません</div>
        <div id="loading">読み込み中</div>
        <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="text" 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(event) {
            var fullcalendar_event;

            fullcalendar_event = {
                tittle: $('#tittle').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(event) {
            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>

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);

?>

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);

?>

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');

?>

実行結果です

m.ts10806

2021/11/29 02:44

PHPの話ではないのでは

hoge_1111

2021/11/29 03:20

どこを直せば良いのでしょうか

退会済みユーザー

2021/11/29 04:47 編集

javascriptにおいてnullってなんでしょうね。undefinedやNaNならともかく。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

hoge_1111

2021/11/29 05:12

nullの部分をundefindeに直してもカレンダーが表示されません

FKM

2021/11/29 06:27

もっと基本から見直した方がいいですよ。ライブラリやプラグインを使用するためには、その事前に呼び出しの制御が必要です。逆に不要なものは不要です。この場合、不要な処理が邪魔してますね。

hoge_1111

2021/11/29 06:40

不要な処理とは具体的にどこを指してますか

FKM

2021/11/29 06:46

使用しているfullcalenderのバージョンを今一度確認してみてください。最新のver4ならjQuery未使用です。

hoge_1111

2021/11/29 07:09

fullcalendarのv5です

退会済みユーザー

2021/11/30 09:58

引用されている卒検メモの記事、FullCalendar ver. 3.4.0って書いてあって、でも使っているのはv5？使い方が違って当然というか、例えば v5対応の記事を参考にするべきではないかと思うのですが。例えばこちらなど。 FullCalendar v5.0.0を使いこなす（カスタマイズ編） | フロントエンドBlog | ミツエーリンクス https://www.mitsue.co.jp/knowledge/blog/frontend/202012/08_0900.html