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

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

app/assets/stylesheets/application.scss

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

JavaScript

app/assets/javascripts/application.js

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

$(function () {
    //
    $(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',Écrivez les trois suivants et remplissez ** bundle install ** SCSS Remplissez ce qui suit dans application.scss Copiez et collez tel quel. Cela affichera le calendrier en japonais. Détecter la transition d'écran Ajouté ci-dessous
            $('#calendar').fullCalendar({
                events: '/events.json',
                //Afficher le haut du calendrier par année et par mois
                titleFormat: 'AAAA M mois',
                //Afficher le jour en japonais
                dayNamesShort: ['journée', 'Mois', 'Feu', 'eau', 'bois', 'Argent', 'sol'],
                //Disposition des boutons
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                //Intervalle d'affichage des événements sans heure de fin
                defaultTimedEventDuration: '03:00:00',
                buttonText: {
                    prev: 'Avant',
                    next: 'Suivant',
                    prevYear: 'Année précédente',
                    nextYear: 'l'année suivante',
                    today: 'aujourd'hui',
                    month: 'Mois',
                    week: 'la semaine',
                    day: 'journée'
                },
                // Drag & Drop & Resize
                editable: true,
                //Affichage de l'heure de l'événement sur 24 heures
                timeFormat: "HH:mm",
                //Changer la couleur de l'événement
                eventColor: '#87cefa',
                //Changer la couleur du texte de l'événement
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

Comment afficher le calendrier

Il est affiché uniquement par "#calendar" (lors de l'écriture en HTML, écrivez l'élément div dont l'id est calendrier).

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
//Cette fois, je l'ai écrit sous le code existant.
#calendar

※point important Veuillez désactiver la fonction turbolinks.

app/views/layouts/application.html.haml

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

Paramètres de routage

Définissez le routage de manière à pouvoir le vérifier immédiatement après son démarrage.

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

Lorsque vous démarrez l'application avec "rails s", le calendrier doit être affiché comme ci-dessous.

Cliquez sur Nouveaux événements pour les saisir et les événements seront affichés sur le calendrier. Vous pouvez vérifier les détails de l'événement en cliquant sur l'événement dans le calendrier.

Impressions

En utilisant la bibliothèque jQurery, j'ai pu facilement afficher le calendrier. J'aimerais continuer à utiliser activement la bibliothèque à l'avenir.

Les références

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