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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

891閲覧

fullCalenderの使い方について

a0841_1974

総合スコア29

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/07/24 14:49

編集2022/01/12 10:55

いつもお世話になっております。

以下の環境で
fullcalendarを使用して以下の事を実施したいのですが、
出来ません。
どのように実施すればうまく動くのでしょうか。

【環境】
STS3.8
springboot2
JAVA8

【実施したい事】
1.2018-07-05のカレンダーをクリックします。
2.modalが開くので、イベント名にTEST、日付(From)に2018-07-05を入力して
登録ボタンをおします。
3.2018-07-05のカレンダーに手順2で登録した予定を設定します。

使用するHTML

<!DOCTYPE html> <html lang="ja" xmlns="http://www.thymleaf.org"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrapの基本テンプレート</title> <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-1/css/bootstrap.min.css}" /> <link rel="stylesheet" th:href="@{/webjars/fullcalendar/3.9.0/dist/fullcalendar.min.css}" /> <link rel="stylesheet" th:href="@{/css/common.css}" /> </head> <body> <h1>ドラッグドロップ1</h1> <div id="contents" class="container-fluid"> <div class="row"> <div class="col-xs-12"> <div class="panel"> <div class="panel-heading"> スケジュール表 </div> <div class="panel-body"> <!-- メッセージ表示したい時はこの辺に --> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="calendar"></div> <!-- ここがカレンダー表示部分 --> </div> </div> </div> </div> </div> </div> </div> <div id="calendarModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">イベント</h3> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <form method="post" id="dialog-form"> <div class="modal-body"> <div id="err_message"></div> <div class="modal-regist"> <div class="row modal-row"> <div class="input-group"> <input type="text" class="form-control event_name" name="event_name" id="event_name" placeholder="イベント名" value=""> </div> </div> <div class="line-adjust"></div> <div class="row modal-row"> <div class="input-group"> <input type="text" class="form-control event_day_from" name="event_day_from" id="event_day_from" placeholder="日付(From)" value=""> </div> </div> <div class="row modal-row"> <div class="input-group"> <input type="text" class="form-control event_time_from" name="event_time_from" id="event_time_from" placeholder="時間" value=""> </div> </div> <div class="row modal-row"> <div class="input-group"> <input type="text" class="form-control event_day_to" name="event_day_to" id="event_day_to" placeholder="日付(To)" value=""> </div> </div> <div class="row modal-row"> <div class="input-group"> <input type="text" class="form-control event_time_to" name="event_time_to" id="event_time_to" placeholder="時間" value=""> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" id="btn_save" class="btn btn-primary">登録</button> <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button> </div> </form> </div> </div></div> <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script> <script type="text/javascript" th:src="@{/webjars/moment/2.22.2/min/moment.min.js}"></script> <script type="text/javascript" th:src="@{/webjars/fullcalendar/3.9.0/dist/fullcalendar.min.js}"></script> <script type="text/javascript" th:src="@{/webjars/fullcalendar/3.9.0/dist/locale/ja.js}"></script> <script type="text/javascript" th:src="@{/webjars/bootstrap/4.0.0-1/js/bootstrap.min.js}"></script> <script type="text/javascript"> $(function() { $('#calendar').fullCalendar({ header: { // fullcalendarのヘッダーに配置するボタン // 左側には「前月、翌月、今日」のボタン // 中央には表示している月 // 右側には月表示、週表示、日表示、月予定 left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay,listMonth' }, // ボタン文字列 buttonText: { prev: '先月', next: '翌月', }, timeFormat: 'HH:mm', // 時間表示フォーマット timezone: 'Asia/Tokyo', // タイムゾーン設定 eventLimit: true, // イベント増えた時にリンクボタン表示 editable: true, // 編集可能設定 slotEventOverlap: true, // イベントの見た目を重ねて表示 selectable: true, // カレンダー空白部分のドラッグ可能 selectHelper: true, // これをtrueにすると範囲設定できます slotLabelFormat:"HH:mm", // 日、週の左側のラベル表示 selectMinDistance: 1, events: function(start, end, timezone, callback) { // ページロード時に表示するカレンダーデータ取得イベント }, eventClick: function(calEvent, jsEvent, view) { // カレンダーに設定したイベントクリック時のイベント $('#modalTitle').html(calEvent.title); $('#modalBody').html(calEvent.description); $('#calendarModal').modal(); }, dayClick: function(date, jsEvent, view) { // カレンダー空白部分クリック時のイベント alert(date.format()); $('#calendarModal').modal({backdrop:"static"}); }, select: function(start, end) { // カレンダー空白部分をドラッグして範囲指定した時のイベント alert("KITA4"); }, eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) { // イベントをドラッグして別日に移動させた時のイベント alert("KITA5"); } }); // 保存ボタンを押した時のイベント $( "#btn_save" ).click(function() { // 入力情報の取得 var v_event_name=$("#dialog-form input#event_name").val(); var v_event_day_from=$("#dialog-form input#event_day_from").val(); $("#calendar").fullCalendar('addEventSource', [{ title: v_event_name, start: v_event_day_from, }]); $("#dialog-form").modal('hide'); }); }); </script> </body> </html>

(補足)
現在の問題点は、実施したい事3を行うでカレンダーに登録した予定をさせたいのですが、
予定が表示されません。
cssはChromeのF12を使用して読み込まれている事は確認しております。

よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2018/07/24 22:34

現在のコードで起きている問題を記載してください。また、それぞれのcssなど外部ファイルは正しく読み込めているのでしょうか。実行しているブラウザ開発ツールのコンソールを確認してください。
退会済みユーザー

退会済みユーザー

2018/07/24 23:11

javaとjavascriptは違います。タグを変更してください。同様の理由でspringbootは削除してください
a0841_1974

2018/07/24 23:42

ご連絡ありがとうございます。現在の問題点は、実施したい事3を行うでカレンダーに登録した予定をさせたいのですが、予定が表示されません。cssはF12を使用して読み込まれている事は確認しております。
a0841_1974

2018/07/24 23:43

タグは修正いたしました。
m.ts10806

2018/07/25 00:35

質問に追記してください。こちらのコメント欄はデフォルト非表示であるため埋もれます
a0841_1974

2018/07/25 02:00

ご連絡ありがとうございます。質問欄に追記いたしました。
guest

回答1

0

以下の処理を外したら、
カレンダーの登録が出来ました。

events: function(start, end, timezone, callback) { // ページロード時に表示するカレンダーデータ取得イベント },

何故、上記処理を外したら、登録ができるようになるのかまでは、
まだ調べてません。

投稿2018/07/25 13:47

a0841_1974

総合スコア29

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問