Let's make something that can manage events using fullcalendar. ① Preparation

I'm trying to create something that can manage events using fullcalendar.

This is also for studying Ruby on Rails. If you have any suggestions, such as something wrong or something that should be improved, please let me know. The reference book is "Ruby on Rails 5 Quick Learning Practice Guide that can be used in the field". Let's do our best.

environment

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

Creating an app

$ rails new Mark -d postgresql

Creating a model

$ rails g model Event Rails models consist of two main components -Ruby class corresponding to the model -Database table corresponding to the model

Class names and table names have the following naming conventions. -The database table name is a plural form of the model class name. ・ The model class name is camel case, and the table name is snake case.

Set the attributes of the Event model

For the time being, like this.

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 Apply migration to database.

Creating controllers and views

$bin/rails g controller events index show new edit The controller name is the plural of the model. Add the required action name after that.

Routing settings

config/routes.rb

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

implementation of fullcalendar

Added to Gemfile.

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

$ bundle install

Added to application.js and application.css

assets/javascripts/application.js

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

assets/stylesheets/application.css

*= require fullcalendar
*/

Write the code in application.js.

assets/javascripts/application.js

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

Added so that it can be displayed in view.

app/view/events/index.html.erb

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

Try to start it with rails s.

Oh, it's done. I've just displayed it, so let's make the contents from now on. ..

reference

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