質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2089閲覧

fullcalendarが表示しません

hoge_1111

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/11/29 02:16

編集2021/11/29 06:42

卒研メモ: 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'); ?>

実行結果です
実行結果です

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/11/29 02:44

PHPの話ではないのでは
hoge_1111

2021/11/29 03:20

どこを直せば良いのでしょうか
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
guest

回答1

0

fullcalenderはver4よりjQuery未使用で動作するようになっています。
それにもかかわらずjQueryを使用しようとしています。

その割にjQueryを呼び出す処理がどこにもありません。

投稿2021/11/29 06:48

FKM

総合スコア3647

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoge_1111

2021/11/29 07:05

jQuepyを使用しようとしている部分はどこですか?
FKM

2021/11/29 07:21

$(document).ready(function() { これはjQueryを使用しますというイベント処理ですよ。 おそらくVer3の以前のソースを参考にしてたために、こんな記述になってしまったんじゃないかと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問