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

GemFile to be introduced

Write the following three ** bundle install **

gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

Fill out the SCSS

Fill in the following in application.scss

app/assets/stylesheets/application.scss

*= require_tree .
 *= require_self
 *= require fullcalendar
 */

JavaScript Please copy and paste as it is. This will display the calendar in Japanese.

app/assets/javascripts/application.js

//= require jquery
//= require moment
//= require fullcalendar

$(function () {
    //Detect screen transition
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

            function Calendar() {
                return $('#calendar').fullCalendar({
                });
            }
            function clearCalendar() {
                $('#calendar').html('');
            }

            $(document).on('turbolinks:load', function () {
                Calendar();
            });
            $(document).on('turbolinks:before-cache', clearCalendar);

            //events: '/events.json',Added below
            $('#calendar').fullCalendar({
                events: '/events.json',
                //Display the top of the calendar by year and month
                titleFormat: 'YYYY M month',
                //Display the day of the week in Japanese
                dayNamesShort: ['Day', 'Month', 'fire', 'water', 'wood', 'Money', 'soil'],
                //Button layout
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                //Display interval for events with no end time
                defaultTimedEventDuration: '03:00:00',
                buttonText: {
                    prev: 'Before',
                    next: 'Next',
                    prevYear: 'Previous year',
                    nextYear: 'following year',
                    today: 'today',
                    month: 'Month',
                    week: 'week',
                    day: 'Day'
                },
                // Drag & Drop & Resize
                editable: true,
                //Event time display to 24 hours
                timeFormat: "HH:mm",
                //Change the color of the event
                eventColor: '#87cefa',
                //Change the text color of the event
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

How to display the calendar

It is displayed only with "#calendar" (when writing in HTML, write the div element with id calendar).

app/views/events/index.html.haml

%p#notice= notice
%h1 Events
%table
  %thead
    %tr
      %th Title
      %th Body
      %th Start date
      %th End date
      %th{:colspan => "3"}
  %tbody
    - @events.each do |event|
      %tr
        %td= event.title
        %td= event.body
        %td= event.start_date
        %td= event.end_date
        %td= link_to 'Show', event
        %td= link_to 'Edit', edit_event_path(event)
        %td= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' }
%br/
= link_to 'New Event', new_event_path
//This time I wrote it under the existing code.
#calendar

※important point Please turn off the turbolinks function.

app/views/layouts/application.html.haml

%body{"data-turbolinks" => "false"}
    = yield

Routing settings

Set the routing so that you can check it immediately after starting it.

Rails.application.routes.draw do
  root "events#index"
  resources :events
end

When you start the app with "rails s", the calendar should be displayed as below.

Click New events to enter them and the events will be displayed on the calendar. You can check the details of the event by clicking the event on the calendar.

Impressions

By using the jQurery library, I was able to easily display the calendar. I would like to continue to actively use the library in the future.

References

https://qiita.com/syukan3/items/68280ce4ff45aa336363