Cloud9-RoR-fullcalendar-rails & json

參考來源(json)：http://blog.crowdint.com/2014/02/18/fancy-calendars-for-your-web-application-with-fullcalendar.html

範例下載：https://github.com/FerPerales/fullcalendar_and_rails_example

請下載範例檔，使用現成的檔案就行嘍！(CRUD不使用本範例的套件)

套用json至fullcalendar

Copy app\views\events 下的index.json.jbuilder至cloud9中，@events及event的部份請更改成自己的model名稱哦！

json.array!(@calendars) do |calendar|
  json.extract! calendar, :id, :title
  json.start calendar.dt
end

編輯calendar_controller.rb，萬一欄位跟範例的不一樣該怎麼辦呢？我就剛好遇到這個問題，請參考index select()裡的寫法，joins不需要的人就拿掉吧！

  def index
    @calendars = calendar.select("calendars.id, CONCAT(calendars.vdate , ' ', calendars.vtime, ':00:00') AS dt , users.username AS title").joins(:user)
  end

編輯app\assets\javascripts底下的calendar.coffee

$(document).ready ->
  $('#calendar').fullCalendar
    header:
      left: 'prev,next today'
      center: 'title'
      right: 'month'
    defaultView: 'month'
    slotMinutes: 15
    loading: (bool) ->
      if bool
        $('#loading').show()
      else
        $('#loading').hide()
      return
    events: '/calendars.json'
    timeFormat: 'Ahh點'
  return

完成後的內容會像下圖

下一篇會教怎麼加入CRD，U的部份我不需要，加上沒時間，就跳過不做了。