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

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

ただいまの
回答率

90.50%

  • JavaScript

    16431questions

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

  • jQuery

    6709questions

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

fullCalenderの使い方について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 178

a0841_1974

score 13

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

以下の環境で
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を使用して読み込まれている事は確認しております。 

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • a0841_1974

    2018/07/25 08:43

    タグは修正いたしました。

    キャンセル

  • mts10806

    2018/07/25 09:35

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

    キャンセル

  • a0841_1974

    2018/07/25 11:00

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

    キャンセル

回答 1

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16431questions

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

  • jQuery

    6709questions

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