fullcalendarによるイベント発火

現在勉強の為、自力でDocker上にスケジューラを作成しようと奮闘しています。
カレンダーが必要だったので、fullcalendarを利用して実装しています。イベント登録の時に、モーダルウィンドウを付けたらイベントの登録が行いやすくなると考え、カレンダーの時間項目を触るとモーダルウィンドウが表示されるようにしたいのですが、そこで意図しない動きをしてしまい、３日ほど調べていましたが解決できそうになかったので、質問致しました。
fullcalendarはJavaScript側でDOMContentLoadedを利用して下記のように中身を宣言しております。

HTML
1<div id='calendar'></div>

JavaScript
1var calendarEl = document.getElementById('calendar');
2var today = getNowYMD();//今日の日付を取得する。
3var calendar = new FullCalendar.Calendar(calendarEl, {
4    initialView: 'resourceTimeGridDay',
5    initialDate: today,
6    locale: 'ja',
7    height: 'auto',
8    editable: false,
9    selectable: true,
10    dayMaxEvents: false, // allow "more" link when too many events
11    dayMinWidth: 200,
12    headerToolbar: {
13        left: 'prev,next today',
14        center: 'title',
15        right: 'resourceTimeGridDay,resourceTimeGridTwoDay,resourceTimeGridWeek,dayGridMonth'
16    },
17      
18    views: {
19        resourceTimeGridTwoDay: {
20            type: 'resourceTimeGrid',
21            duration: { days: 2 },
22            buttonText: 'days 2',
23        }
24    },
25    
26    resources: [
27        //公式ドキュメント通りなのでカット
28        { id: 'd', title: 'Room D', eventColor: '#FF0000' }
29    ],
30
31    events: [
32        //公式ドキュメント通りなのでカット
33        { id: '5', resourceId: 'd', start: today + 'T10:00:00', end: today + 'T15:00:00', title: 'event 5' }
34    ],
35
36    select: function(arg){
37        console.log('select');
38    },
39
40    dateClick: function(arg) {
41        //===============================
42        //時間の欄を押したら通るところ
43        //===============================
44        dateClick_function(arg);
45    },
46});
47
48function dateClick_function(arg)
49{
50    //ひとまず、HTMLを直接いじったら出来ないか奮闘中
51    console.log(arg.dayEl.innerHTML);
52}

モーダルウィンドウの方は、Bootstrapのmodalを利用しております。
こちらのページを今は表示だけ出来ればいいので、そのままコピーぺしている状態です。
この２つを組み合わせて、fullcalendarのHTMLを下記のように変更するとカレンダー全体どこを押してもモーダルウィンドウが表示されるようになってしまいます。

HTML
1div id='calendar' data-toggle="modal" data-target="#exampleModal" data-whatever="@calendar"></div>

なんとか時間の欄があるところをクリックした場合のみ、モーダルウィンドウを表示出来るようにならないでしょうか？
つたない質問で申し訳ございませんが、お答え頂けると幸いです。

HTML全体
1<html>
2  <head>
3    <!--Javascript用API呼び出し-->
4    <link href="{% static '/modules/fullcalendar/main.min.css' %}" rel='stylesheet' />
5    <script src="{% static '/modules/fullcalendar/main.min.js' %}"></script>
6
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
8    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
9    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
10    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
11
12    <!--Googleで提供されるAjax用API-->
13    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
14        
15    <script type="text/javascript" src="{% static '/js/calendar.js' %}"></script>
16    <style>
17      /* fullcalendar */
18      body {
19        margin: 0;
20        padding: 0;
21        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
22        font-size: 14px;
23      }
24
25      #calendar {
26        max-width: 1100px;
27        margin: 50px auto;
28      }
29    </style>
30  </head>
31  <body>
32    <div id='calendar' data-toggle="modal" data-target="#exampleModal" data-whatever="@calendar"></div>
33    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
34      <div class="modal-dialog" role="document">
35        <div class="modal-content">
36          <div class="modal-header">
37            <h5 class="modal-title" id="exampleModalLabel">New Event</h5>
38            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
39              <span aria-hidden="true">&times;</span>
40            </button>
41          </div>
42          <div class="modal-body">
43            <form>
44              <div class="form-group">
45                <label for="recipient-name" class="col-form-label">start time</label>
46                <input type="text" class="form-control" id="recipient-name">
47              </div>
48              <div class="form-group">
49                <label for="message-text" class="col-form-label">end time</label>
50                <textarea class="form-control" id="message-text"></textarea>
51              </div>
52            </form>
53          </div>
54          <div class="modal-footer">
55            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
56            <button type="button" class="btn btn-primary">Send message</button>
57          </div>
58        </div>
59      </div>
60    </div>
61  </body>
62</html>

m.ts10806

2020/11/03 09:17

HTML全体提示されないと何とも言えないと思います。

stdio

2020/11/04 00:47

django使っているので、どこまで書けばいいのか分かりませんが、全体を載せておきます。

stdio

2020/11/04 01:02

画面のイメージがよく分からないと思ったので画像載せておきました。

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

回答1件

ベストアンサー

HTML
1<div id='calendar' data-toggle="modal" data-target="#exampleModal" data-whatever="@calendar"></div>

↑この部分にdata-toggle="modal"を指定しているのが問題ですね。カレンダー全体が発火対象になってしまいます。
「この辺押した時」の部分にどのようなclassが割り当てられているのかわかりませんが、仮にfc-dayというクラスだとすると、

jQuery
1$(document).on('click', '.fc-day', function(){
2  $('#exampleModal').modal('show');
3});

などとすればいいのではと思います。

投稿2020/11/06 13:59

cerfweb

総合スコア1907

stdio

2021/02/25 21:47

すみません。お返事が遅れました。既に解決済みだったので、クローズさせて頂きます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.37%

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

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

質問する

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

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

fullcalendarによるイベント発火

関連した質問