Rails Kitchen

It's a place to write on stuff I learned recently.

FullCalendar - Integration With Ruby on Rails

| Comments

FullCalendar is a jQuery plugin that provides a full-sized drag 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 (like clicking or dragging an event). It is open source licensed under an MIT license

Step 1 : Download the JQuery fullcalendar plugin by here and add fullcalender.js and fullcalender.css into javascripts and stylesheets folder.Fullcalendar is also available as a gem for Ruby on Rails which fits well with Asset Pipeline. 
1

gem 'fullcalendar-rails'
Once the gem is installed, include fullcalendar javascript and css assets to your js and css file
Step 2 : In view page index.html.erb or some other html.erb page add a div with id ‘calendar’
Then add following code to js file 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(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 calender
In my example 
1
2
3
4
5
6
7
8
9
10
11

class DashboardController < ApplicationController
  respond_to :json
  def get_events
    @task = current_user.tasks
    events = []
    @task.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 :text => events.to_json
  end
end
1
2
3
4
5

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

Comments