Railsでfullcalendarを使ってみる(Ajax通信でイベント登録)

概要

gemのfullcalndarを使ってイベントの登録をAjax通信でできるようにする。

• カレンダーの日付をクリックするとイベント登録用のモーダルが表示
  

• 登録ボタンを押すと、イベントが登録される
  

コード

• jsファイル
  dayClickでカレンダーの日付をクリックした時のアクションを記述する。クリックした日付情報を取得し、イベント登録用のモーダルに自動入力させる。

calendar.js

$('#calendar').fullCalendar({
    events: '/shops/events.json',
    timeFormat: 'H:mm',
    eventColor: '#63ceef',
    lang: 'ja',
    dayClick: function (start, end, jsEvent, view) {
      //クリックした日付情報を取得
      const year = moment(start).year();
      const month = moment(start).month()+1; //1月が0のため+1する
      const day = moment(start).date();
      //イベント登録のためnewアクションを発火
      $.ajax({
        type: 'GET',
        url: '/shops/events/new',
      }).done(function (res) {
        //イベント登録用のhtmlを作成
        $('.modal-body').html(res);
        //イベント登録フォームの日付をクリックした日付とする
        $('#event_start_time_1i').val(year);
        $('#event_start_time_2i').val(month);
        $('#event_start_time_3i').val(day);
        //イベント登録フォームのモーダル表示
        $('#modal').modal();
        // 成功処理
      }).fail(function (result) {
        // 失敗処理
        alert('エラーが発生しました。運営に問い合わせてください。')
      });
    },

  });

• イベントコントローラー
  render_to_stringを使って、イベント登録フォームのviewを文字列として取得し、モーダル上に表示する。

events_controller.rb

  def new
    @event = Event.new
    render plain: render_to_string(partial: 'form_new', layout: false, locals: { event: @event })
  end

• イベント登録フォーム
  

_form_new.html.slim

h1 新規イベント追加
= form_with model: event, url: shops_events_path do |f|
  = render "devise/shared/error_messages", resource: f.object
  .form-group
    = f.label :title
    = f.text_field :title, class:'form-control mb-3', required: true
  .form-group
      = f.label :start_time
      br
      = f.datetime_select :start_time, {default: Date.today + 19.hours + 00.minutes, minute_step: 10}, class:'form-control bootstrap-date mb-3'
  .form-group
    = f.label :description
    = f.text_area :description, class:'form-control mb-3'
  .actions
    = f.submit class: "btn btn-primary mb-3 js-event-create-btn"

• createアクション時の処理
  removeEventsの後、refetchEventsするとカレンダー上のイベントが再描画される。

create.js.slim

| $('#modal').modal('toggle');
| $("#calendar").fullCalendar('removeEvents');
| $("#calendar").fullCalendar('refetchEvents');

結論

fullcalendarを使ってAjax通信でイベント登録することができた。