Cloud9-RoR-fullcalendar-rails 安裝

參考來源：https://rubygems.org/gems/fullcalendar-rails/versions
參考文章/下載來源：https://github.com/bokmann/fullcalendar-rails
官網：https://fullcalendar.io/
doc說明：https://fullcalendar.io/docs/
範例參考(1)：http://vinsol.com/fullcalendar-demo
範例參考(1)下載來源：https://github.com/vinsol/fullcalendar_rails
範例參考(2)：http://blog.crowdint.com/2014/02/18/fancy-calendars-for-your-web-application-with-fullcalendar.html
輔助套件(必裝)：https://github.com/derekprior/momentjs-rails

p.s.範例參考都有提供GitHub下載，可以用clould9另開一個新專案載入後試玩看看。

fullcalendar-rails需要用到momentjs-rails，所以我們先安裝monentjs-rails套件。如果想先檢查有沒有相關套件，可以執行以下指令：

$ gem list

底下會列出主機上所有安裝的gem套件，已經安裝的人可以跳過安裝步驟哦。

momentjs-rails
執行安裝指令

$ gem install momentjs-rails
$ bundle install

在Gemfile檔加上兩行

# momentjs
gem 'momentjs-rails'

編輯application.js檔，加入

//= require moment 

編輯test/test_helper.rb檔，加入

  test "truth" do
    assert_kind_of Module, Momentjs::Rails
  end

然後上傳下列的檔案到指定的資料夾中

• lib：momentjs-rails.rb
• vendor\assets\javascripts：moment.js、moment folder

fullcalendar-rails

執行安裝指令

$ gem install fullcalendar-rails
$ bundle install

在Gemfile檔加上兩行

# full calendar
gem 'fullcalendar-rails'

編輯application.css檔，加入

 *= require fullcalendar

編輯application.js檔，加入

//= require fullcalendar

如果想要轉換語系，再加入

//= require fullcalendar/lang/zh-tw

接下來有兩種套用方式，model跟view。

model：在app\assets\javascripts\找到該mode的.coffee檔，加入

$(document).ready ->
  $("#calendar").fullCalendar(
    lang: 'zh-tw' #轉換語系
    editable: true
    header:
      left: 'prev,next today'
      center: 'title'
      right: 'month,agendaWeek,agendaDay,listWeek'
    defaultView: 'month'
    height: 500
    slotMinutes: 15
  )

打開該model下的view(.html.erb)檔，再加入

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

就會顯示月曆了。

view：想套用單一頁面則打開該view(.html.erb)檔後，加入

<scrip>
$(document).ready(function(){
  $('#calendar').fullCalendar({
    lang: 'zh-tw', //轉換語系
    editable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    defaultView: 'month',
    height: 500,
    slotMinutes: 15
  });
});
</scrip>

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

從這段起跟列印有關，不需要用到列印功能的人可以跳過。
----------------------------------------------------------------------------------
在stylesheets資料夾下新增一個application-print.css.scss檔。

編輯config/application.rb檔，加上

config.assets.precompile += ['application-print.css']

在需要列印的view頁面加入

<%= stylesheet_link_tag "application-print", :media => "print" %>

----------------------------------------------------------------------------------

上傳下列檔案

• lib：fullcalendar-rails.rb及fullcalendar-rails folder
• vendor\assets\javascripts：fullcalendar folder、fullcalendar.js
• vendor\assets\stylesheets：fullcalendar.css、fullcalendar.print.css

希望大家都能順利的完成嘍！