Cara Membuat Kalender Dengan Jquery fullcalendar.js

Kali ini kita akan membuat events calendar menggunakan jquery fullcalendar dan ruby on rails

Pertama kita download dahulu jquery fullcalendarnya disini

Kemudian kita buat project baru

$ rails new fullcalendar -d postgresql

$ cd fullcalendar

$ rake db:create

Buat crud events

$ rails g scaffold event title:string start:datetime end:datetime color:string

$ rake db:migrate

Extract dan buka folder fullcalendar yang kita telah kita download tadi
Copy dan paste file 
- Fullcalendar.js ke fullcalendar/app/assets/javascripts
- Fullcalendar.css ke fullcalendar/app/assets/stylesheets
- Lib/moment.min.js ke fullcalendar/app/assets/javascripts

Edit file fullcalendar/app/assets/javascripts/application.js tambahkan require untuk file yang baru

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require moment.min
//= require fullcalendar
//= require_tree .

Edit file fullcalendar/app/views/events/index.html.erb Tambahkan tag html id fullcalendar

<div id = "fullcaendar"></div>

Edit file fullcalendar/app/views/events/_event.json.jbuilder Edit isinya seperti berikut 

date_format = event.all_day_event? ? '%Y-%m-%d' : '%Y-%m-%dT%H:%M:%S'

json.id event.id
json.title event.title
json.start event.start.strftime(date_format)
json.end event.end.strftime(date_format)

json.color event.color unless event.color.blank?
json.allDay event.all_day_event? ? true : false

json.update_url event_path(event, method: :patch)
json.edit_url edit_event_path(event)

Edit file fullcalendar/app/model/event.rb  Tambahkan method all_day_event?

class Event < ApplicationRecord
  def all_day_event?
    self.start == self.start.midnight && self.end == self.end.midnight ? true : false
  end
end

Edit file fullcalendar/app/assets/javascripts/events.coffee tambahkan baris code berikut 

date_range_picker = undefined
date_range_picker = ->
  $('#fullcaendar').fullCalendar
    firstDay: 1
    lang: 'es'
    header:
      left: 'title'
      center: ''
      right: 'prev,next'
    eventSources: '/events.json'
  return

$(document).on 'turbolinks:load', date_range_picker

Edit fullcalendar/config/routes.rb tambahkan root untuk events

Rails.application.routes.draw do
  resources :events
  root to: "events#index"
end

Tinggal turn on server

$ rails s

Buka di browser http://localhost:3000/events/new untuk menambahkan data event baru

http://localhost:3000 untuk akses halaman utama Hasilnya akhirnya seperti gambar berikut

Selesai, thanks