fullcalendar를 사용하여 이벤트를 관리 할 수있는 것을 만들려고합니다.

이것은 RubyonRails 공부를 겸한 것입니다. 뭔가 잘못되어, 이렇게 개선하는 것이 좋다, 등 지적이 있으면 가르쳐 주셨으면 합니다.
참고서는, 「현장에서 사용할 수 있는 Ruby on Rails 5속습 실천 가이드」입니다.
자, 열심히 가자.

환경

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

앱 만들기

$ rails new Mark -d postgresql

모델 만들기

$ rails g model EventRails의 모델은 주로 두 가지 요소로 구성됩니다.
· 모델에 대응하는 Ruby 클래스
· 모델에 해당하는 데이터베이스 테이블

클래스명과 테이블명에는 이하의 명명 규약이 있다.
・데이터베이스의 테이블명은, 모델의 클래스명을 복수형으로 한 것
・모델의 클래스명은 카멜 케이스, 테이블명은 스네이크 케이스

이벤트 모델의 속성 설정

속성의 의미
속성명·컬럼명
데이터 유형


제목
title
문자열

시작
시작
datetime

끝
끝
datetime

종일
allday
부울

달력 색
color
문자열


우선, 이런 느낌으로.

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마이그레이션을 데이터베이스에 적용.

컨트롤러 및 뷰 만들기

$bin/rails g controller events index show new edit컨트롤러 이름은 모델의 복수형. 그 뒤에 필요한 액션명을 추기.

라우팅 설정

config/routes.rb

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

fullcalendar 구현

Gemfile에 추가.

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

$ bundle install
application.js 및 application.css에 추가

assets/javascripts/application.js

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

assets/stylesheets/application.css

*= require fullcalendar
*/

application.js에 코드 작성.

assets/javascripts/application.js

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

보기에 표시할 수 있도록 추가.

app/view/events/index.html.erb

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

rails s로 시작하자.


오, 할 수있었습니다. 아직, 표시시켰을 뿐이므로, 앞으로 내용을 만들어 가자. .

참고

htps : // 이 m / 가위 / ms / fb0bc1644 에세 888 어 1d4
htps : // 코 m / 쇼타 와타 나베 / ms / 3d0c
htps : // 푹신한 r. 이오/