[RUBY] Lassen Sie uns etwas erstellen, das Ereignisse mithilfe des Vollkalenders verwalten kann. ① Vorbereitung

Ich versuche, etwas zu erstellen, das Ereignisse mithilfe des Vollkalenders verwalten kann.

Dies ist auch für das Studium von Ruby on Rails. Wenn Sie Vorschläge haben, z. B. etwas Falsches oder etwas, das verbessert werden sollte, lassen Sie es mich bitte wissen. Das Nachschlagewerk lautet "Ruby on Rails 5 - Leitfaden für das schnelle Lernen, das vor Ort verwendet werden kann". Geben wir unser Bestes.

Umgebung

OS：MacOS Catalina10.15.5 Ruby：2.6.3 Rails：5.2.4

App erstellen

$ rails new Mark -d postgresql

Modell erstellen

$ rails g model Event Das Rails-Modell besteht aus zwei Hauptkomponenten ・ Ruby-Klasse entsprechend dem Modell -Datenbanktabelle entsprechend dem Modell

Klassennamen und Tabellennamen haben die folgenden Namenskonventionen. -Der Tabellenname der Datenbank ist eine Pluralform des Klassennamens des Modells. ・ Der Name der Modellklasse lautet camel case und der Tabellenname ist snake case.

Legen Sie die Attribute des Ereignismodells fest

Vorerst so.

db/migrate/*******_create_events.rb

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      t.string :title, null: false
      t.datetime :start, null: false
      t.datetime :end, null: false,
      t.boolean :allday, null: false, default: false
      t.string :color, null: false

      t.timestamps
    end
  end
end

$ rails db:migrate Wenden Sie die Migration auf die Datenbank an.

Controller und Ansichten erstellen

$bin/rails g controller events index show new edit Der Controller-Name ist eine Pluralform des Modells. Fügen Sie danach den gewünschten Aktionsnamen hinzu.

Routing-Einstellungen

config/routes.rb

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

Implementierung des Vollkalenders

Gemfile hinzugefügt.

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

$ bundle install

Zu application.js und application.css hinzugefügt

assets/javascripts/application.js

//= require jquery
//= require moment
//= require fullcalendar
//= require_tree .

assets/stylesheets/application.css

*= require fullcalendar
*/

Schreiben Sie den Code in application.js.

assets/javascripts/application.js

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: '/events.json'
    });
  });

Hinzugefügt, damit es in der Ansicht angezeigt werden kann.

app/view/events/index.html.erb

<div id="calendar"></div>

Versuchen Sie, mit Schienen s zu beginnen.

Oh, es ist geschafft. Ich habe es gerade angezeigt, also machen wir von nun an den Inhalt. ..

Referenz

https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4 https://qiita.com/ShoutaWATANABE/items/3d0cddafadb4f275991e https://fullcalendar.io/