はじめに

FullCalendar.jsをgemでインストールしている方が多いのですが、
JavaScript=FrontEndをgemで入れる意味がわからないのでCDNでやる方法を

githubにあげました。

手順

１．Modelとか諸々を作る。

rails g scaffold event title:string body:string start_date:datetime end_date:datetime
rails db:migrate RAILS_ENV=development

２．JavaScriptファイルを作る。

app/assets/javascripts/fullcalendar.js

var g_calendar = null;

var date_now = new Date();
var date_start = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
var date_end = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
date_end.setMonth(date_end.getMonth()+12);

function createCalendar()
{
    return new FullCalendar.Calendar(document.getElementById("calendar"), {
        plugins: ["dayGrid", 'interaction', 'timeGrid', 'list'],

        header: {
            left: "prev",
            center: "title",
            right:" next"
        },

        buttonText: {
            prev: "前の月",
            next: "次の月"
        },

        defaultDate: new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000)),
        timeZone: 'JST',

        validRange: {
            start: date_start,
            end: date_end
        },

        // イベント情報をJSONファイルから読み込みます
        events: "events.json",

        dateClick: function(info) {
            $.ajax({
                type: 'GET',
                url: '/events/new',
                data: { time: moment(info.date).format() },
            }).done(function (res) {
            }).fail(function (result) {
                alert('エラー')
            });
        },
    });
}

function fullCalendar() {
    if (g_calendar == null) {
        g_calendar = createCalendar()
    }
    return g_calendar;
}

３．Viewを更新

app/views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>FullcalendarTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales/ja.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/views/index.html.erb

<div id="calendar"></div>
<div id="inputScheduleForm" class="modal-dialog" role="document"></div>
<br>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var calendar = fullCalendar();
  calendar.render();
});
</script>

４．json.builderを更新

app/views/index.json.builder

json.array!(@events) do |event|
    json.extract! event, :id, :title, :body
    json.start event.start_date
    json.end event.end_date
    json.url event_url(event, format: :html)
end

結果