Ruby on Railsとfullcalendar pluginでGoogleカレンダークローンを作る(1)

前提

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にアクセス