[RUBY] Faisons quelque chose qui puisse gérer les événements en utilisant fullcalendar. ① Préparation

J'essaye de créer quelque chose qui peut gérer les événements en utilisant le fullcalendar.

C'est aussi pour étudier Ruby on Rails. Si vous avez des suggestions, telles que quelque chose de mal ou quelque chose qui devrait être amélioré, veuillez me le faire savoir. Le livre de référence est "Ruby on Rails 5 Guide pratique d'apprentissage rapide qui peut être utilisé sur le terrain". Faisons de notre mieux.

environnement

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

Créer une application

$ rails new Mark -d postgresql

Créer un modèle

$ rails g model Event Le modèle Rails se compose de deux composants principaux ・ Classe Ruby correspondant au modèle -Table de base de données correspondant au modèle

Les noms de classe et les noms de table ont les conventions de dénomination suivantes. -Le nom de table de la base de données est une forme plurielle du nom de classe du modèle. ・ Le nom de la classe de modèle est cas de chameau et le nom de table est cas de serpent.

Définir les attributs du modèle d'événement

Pour le moment, comme ça.

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 Appliquer la migration à la base de données.

Création de contrôleurs et de vues

$bin/rails g controller events index show new edit Le nom du contrôleur est une forme plurielle du modèle. Ajoutez ensuite le nom de l'action requise.

Paramètres de routage

config/routes.rb

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

Mise en œuvre du calendrier complet

Ajouté à Gemfile.

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

$ bundle install

Ajouté à application.js et application.css

assets/javascripts/application.js

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

assets/stylesheets/application.css

*= require fullcalendar
*/

Écrivez le code dans application.js.

assets/javascripts/application.js

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

Ajouté pour qu'il puisse être affiché dans la vue.

app/view/events/index.html.erb

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

Essayez de commencer par les rails s.

Oh, c'est fait. Je viens de l'afficher, alors créons le contenu à partir de maintenant. ..

référence

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