fullcalendar その3 〜設定済みのイベントをクリックしてモーダル表示してみた〜

想定より長くなりましたが3回目です。
過去の2回はこちらをご覧下さい。

tsuralabo.hatenablog.com
tsuralabo.hatenablog.com

モーダル表示部分を追加してみる

前々回でBootstrapを使った外枠を作りましたので、そこにモーダル表示部分を追加してみます。
端折ってコピペしたものが以下のコードです。

<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 modal-dialog-center">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">close</span>
        </button>
        <span id="modalTitle" class="modal-title"></span>
      </div>
      <div id="modalBody" class="modal-body"></div>
      <div id="modalFooter" class="modal-footer"></div>
    </div>
  </div>
</div>
<!-- ここまでモーダル追加部分で追記しました -->
<script>
  <!-- fullcalendar発火部分 -->
</script>

特に何も凝っておらず普通のモーダルです。

fullcalendarのイベントにモーダル発火部分を書いてみる

さて、とりあえずモーダルの準備ができたので発火させる必要があります。
表示しているイベントをクリックした時に発火させることにします。
アレですね。カレンダーに表示された帯みたいなイベント。
デフォルトだと紺色っぽいアレです。

記載箇所は以下です。
これもまた端折って前回のものをコピペすることにします。

<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listMonth'
        },
        timeFormat: 'HH:mm',
        timezone: 'Asia/Tokyo', 
        eventLimit: true, 
        editable: true, 
        slotEventOverlap: true, 
        selectable: true, 
        selectHelper: true, 
        selectMinDistance: 1, 
        events: function(start, end, timezone, callback) {
           // 前回実装したカレンダーデータ取得部分
           setCalendarList(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'), callback);
        },
        eventClick: function(calEvent, jsEvent, view) {
           // ***** 今回はここにクリックイベントを追加 *****
           $('#modalTitle').html(calEvent.title); // モーダルのタイトルをセット
           $('#modalBody').html(calEvent.description); // モーダルの本文をセット
           $('#calendarModal').modal(); // モーダル着火
        },
        dayClick: function(date, jsEvent, view) {
           // カレンダー空白部分クリック時のイベント
        },
        select: function(start, end) {
           // カレンダー空白部分をドラッグして範囲指定した時のイベント
        },
        eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
           // イベントをドラッグして別日に移動させた時のイベント
        }
    });
  });
</script>

「eventClick」という名が指す通り、イベントクリック時のイベントはここに書きます。
calEventの中に「クリックされたイベント情報」が詰まっていますので、その中からデータを抜いてモーダルにセットしています。

例えばこれ以外にも編集ボタンとか削除ボタンを実装したいという場合は、今回記載したイベントの中でHTML要素を生成してモーダルにセットすれば大丈夫です。
こんな感じになります。

eventClick: function(calEvent, jsEvent, view) {
   // 編集ボタンと削除ボタン、ついでに閉じるボタンのHTML要素を追加
   var editHtml = 
       '<a role="button" class="btn btn-danger pull-left" href="' + "<?php echo $this->Url->build('/'); ?>" + 'calendars/delete/' + calEvent.id + '/">削除</a>' + 
       '<a role="button" class="btn btn-primary" href="' + "<?php echo $this->Url->build('/'); ?>" + 'calendars/edit/' + calEvent.id + '/">編集</a>' +
       '<a role="button" class="btn btn-default" data-dismiss="modal">閉じる</a>';
   $('#modalTitle').html(calEvent.title);
   $('#modalBody').html(calEvent.description);
   $('#calendarModal').modal(); // モーダル着火
}

CalendarsControllerのdeleteアクションで削除、editアクションで編集ということにしています。
calEventから対象のスケジュールデータのIDを渡してあげれば削除も編集もできると思います(ここは割愛します)

ちょっとずつですが、fullcalendarがカタチになってきているような気がします。
気のせいである可能性はゼロじゃありませんが、まぁいいです。