FullCalendar - Integration with Ruby On Rails

FullCalendar is a jQuery plugin that provides a full-sized drag-and-drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (such as clicking or dragging an event). It is open source and licensed under an MIT license.

Step 1: Download the jQuery FullCalendar plugin here and add fullcalendar.js and fullcalendar.css to your javascripts and stylesheets folders. FullCalendar is also available as a gem for Ruby on Rails, which integrates well with the Asset Pipeline.

gem 'fullcalendar-rails'

Once the gem is installed, include the FullCalendar JavaScript and CSS assets in your JS and CSS files.

Step 2: In view page index.html.erb or some other html.erb page add a div with id 'calendar'.

Then add the following code to your JS file:

$(document).ready(function () {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay',
    },
    defaultView: 'month',
    height: 500,
    slotMinutes: 15,
    events: '/dashboard/get_events',
    timeFormat: 'h:mm t{ - h:mm t} ',
    dragOpacity: '0.5',
  })
})

Now we need to write a method to fetch JSON data which we are going to display on the calendar:

class DashboardController < ApplicationController
  respond_to :json
  def get_events
    @tasks = current_user.tasks
    events = []
    @tasks.each do |task|
      events << {
        :id => task.id,
        :title => "#{task.taskable.try(:name)} : #{task.task}",
        :start => "#{task.planned_start_date}",
        :end => "#{task.planned_end_date}"
      }
    end
    render :json => events
  end
end

Routes configuration:

# config/routes.rb
DemoApp::Application.routes.draw do
  resources :dashboard do
    get :get_events, on: :collection
  end
end

That's it, now you can see the calendar in your dashboard!