Full_Calendarを使いこなす

実現できること

FullCalendarにてカレンダーを実装し、非同期にて予定を作成、変更、削除ができます。

前提条件

環境
ruby : 2.6.3
rails : 6.1.6
fullcalendar : 5.1.1
webpacker : 4.0.7

導入

yarn add @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/google-calendar

モデルを作成

rails g model Event title:string, start:datetime, end:datetime

controllerを作成

rails g controller events index

routing

resources :events

controller

events_controller.rb

class EventsController < ApplicationController
  before_action :authenticate_user!

  def new
    @event = Event.new
    // form_newをjsファイルにて非同期で描画する
    render plain: render_to_string(partial: 'form_new', layout: false, locals: { event: @event })
  end

  def index
    @customer = current_customer
    @events = Event.where(customer_id: @customer.id)
  end

  def create
    @event = Event.new(event_params)
    if @event.save
      redirect_to events_path
    else
      render :index
    end
  end

  def update
    starttime = params[:start]
    endtime = params[:end]
    event = Event.find(params[:id])
    event.update(start: starttime, end: endtime)
  end

  def destroy
    event = Event.find(params[:id])
    event.destroy
  end

  def event_params
    params.require(:event).permit(:start, :end, :title)
  end
end

view

index.html.erb

<div id='calendar'></div>
<%# ↑このコードさえあればカレンダーが現れてくれます %>

jsを書く

event.js

// インストールしたファイルたちを呼び出します。
import { Calendar} from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import monthGridPlugin from '@fullcalendar/daygrid';
import googleCalendarApi from '@fullcalendar/google-calendar';

//<div id='calendar'></div>のidからオブジェクトを定義してカレンダーを作成

document.addEventListener('turbolinks:load', function() {
    var calendarEl = document.getElementById('calendar');

    //　カレンダーの中身を設定(月表示、クリックアクションを起こす、googleCalendar使用)
    var calendar = new Calendar(calendarEl, {
        plugins: [ monthGridPlugin, interactionPlugin, googleCalendarApi ],

        events: '/events.json',　　 // イベントをjsonにて表示
        locale: 'ja',
        timeZone: 'Asia/Tokyo',
        firstDay: 1,
        headerToolbar: {
          start: '',
          center: 'title',
          end: 'today prev,next'
        },
        buttonText: {
           today: '今日'
        },
        allDayText: '終日',
        height: "auto",
        editable: true,  // イベントの移動
        displayEventTime: false,  // 時刻の非表示
        
        // イベントを移動した時の処理
        eventDrop: function(info) {
            $.ajax({
                type: 'PATCH',
                url: '/events/' + info.event.id,
                data: { start: info.event.start,
                        end: info.event.end
                },
            });
        },
        // イベントをクリックした時の処理
        eventClick: function(info) {
          if(confirm('削除しますか？'))  {
          $.ajax({
              type: 'DELETE',
              url: '/events/' + info.event.id,
            });
            info.event.remove();
          }
        },
        
        // 日付をクリックした時の処理
        dateClick: function(info) {
            $.ajax({
                type: 'GET',
                url:  '/events/new',
            }).done(function (res) {
                $('.modal-body').html(res);
            }).fail(function (result) {
                alert("failed");
            });
        }
    });
    //カレンダー表示
    calendar.render();

view

index.json.jbuilder

 json.array!(@events) do |event|
  json.id event.id
  json.title event.title
  json.start event.start
  json.end event.end
 end

jsファイルにて指定した/events.jsonから呼び出しを行い、カレンダーに描画します。

最後に

初めての投稿です。訂正箇所などございましたら、コメントお願いします。