前提
rbenvでruby環境を構築済み。
bundlerインストール済み。
確認環境
app | version |
---|---|
ruby | 2.1.5 |
rails | 4.1.8 |
fullcalendar-rails | 2.2.2.0 |
momentjs-rails | 2.8.3 |
ひな形を作る
railsのテンプレートを作る。
gemはアプリごとに持つようにするので、ここでは--skip-bundle
オプションを付けておく。
bundle exec rails new calendarclone --skip-bundle
cd calendarclone
Gemfileにfullcalendar-railsを追加する
Gemfile
source 'https://rubygems.org'
gem 'rails', '4.1.8'
gem 'sqlite3'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
gem 'uglifier'
gem 'jquery-rails'
bundle install --path vendor/bundle
カレンダーを表示させてみる
コントローラとアクションを生成する
bundle exec rails g controller calendar index
生成されたテンプレートを修正する
app/views/calendar.index.html.erb
<div id="calendar"></div>
calendar.jsの中でfullcalendarを呼ぶ
app/assets/javascript/calendar.js
$(document).ready(function() {
$('#calendar').fullCalendar({
})
});
app/assets/javascript/application.jsのrequire_tree .
の前に以下の二行を追加
application.js
+ //= require moment
+ //= require fullcalendar
app/assets/stylesheets/application.cssのrequire_tree .
の前に以下の一行を追加
application.css
+ *= require fullcalendar
アプリケーションを起動する
bundle exec rails s
http://localhost:3000/calendar/index
にアクセス