[Ruby] Let’s make something that can manage events using full calendar. ① Preparation

1 minute read

I am trying to create something that can manage events using #fullcalendar. This is for studying Ruby on Rails. If you have any suggestions that something is wrong or that you should improve like this, please let me know. The reference book is “A Guide to Ruby on Rails 5 Quick Learning that can be used in the field”. Let’s do our best.

environment

OS: MacOS Catalina 10.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 The Rails model mainly consists of two elements ・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 the plural class name of the model.
  • Model class name is camel case, table name is snake case

Set the attributes of the Event model

Attribute meaning | Attribute name/Column name | Data type | |:——|:——|:——| |Title|title|string| |Begin |start|datetime| |End|end|datetime| |all day|allday|boolean| |Calendar color|color|string| For the time being, it looks like this.

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 controller and view

$bin/rails g controller events index show new edit The controller name is the plural form of the model. Add necessary action name behind it.

Routing settings

config/routes.rb


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

Full calendar implementation

Added to Gemfile.

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

$ bundle install

Add 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>

Start with rails s. Screenshot 2020-07-03 14.24.37.png

I’m done. I have only 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/