Ruby
JavaScript
Rails

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

More than 3 years have passed since last update.


前提

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