初心者開発メモ!

プログラミングやる上で手こずりやすいところを解説しているブログです

gemのfullcalendarをインストールする

railsのgemにfllcalendarという便利なカレンダーのgemがあります。
google calendarと似ています。 今回はfullcalendarを導入するための手順を説明していきます。

fullcalendarのインストール

gemfileに

gem 'fullcalendar-rails'
gem 'momentjs-rails’
gem 'jquery-rails’

と記述しましょう。
jquety-railsについてはrails3.0以降のバージョンははデフォルトでgemに記述されているのでインストール不要なのでなくても構いません。 記述したらbundle installをしましょう。

app/assets/javascript/application.jsrequire_treeの前に

//= require moment
//= require fullcalendar

を記述します。

app/assets/stylesheets/application.cssrequire_treeの前に

*= require fullcalendar

を記述します。

app/assets/stylesheets/javascriptsの中にcalendar.jsというファイルを作成。
そのファイルに

$(document).ready(function() {
  $('#calendar').fullCalendar({
  })
});

と記述します。

最後にカレンダーを表示させたいビューファイルに

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

と記述するとカレンダーが表示されます。
ここで注意したいのは作成したjsのファイル名とid属性の名前を一致させないと表示されないということです。
あとはrails sでサーバを立ちなおして確認しましょう。