Hi , in this article i am going to explain how to work with
jquery full calendar along with rails 3
.
Step 1 :
Install the gem by typing the following command at terminal or you can add it your gem file
gem 'fullcalendar-rails'
bundle install
you can find full documentation of jquery full calendar from the following link
arshaw full calendar
Step 2:
then add the following line in your application.js file
//= require fullcalendar
Step 3:
add the following line in your application.css file
*= require fullcalendar
Step 4:
then create calendar.js.coffee file add it your assets/javascript folder
assets/javascripts/calendar.js.coffee
$(document).ready ->
$('#calendar').fullCalendar
editable: true,
header:
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
defaultView: 'month',
height: 500,
slotMinutes: 30,
eventSources: [{
url: '/events',
}],
timeFormat: 'h:mm t{ - h:mm t} ',
dragOpacity: "0.5"
eventDrop: (event, dayDelta, minuteDelta, allDay, revertFunc) ->
updateEvent(event);
eventResize: (event, dayDelta, minuteDelta, revertFunc) ->
updateEvent(event);
<br/>
updateEvent = (the_event) ->
$.update "/events/" + the_event.id,
event:
title: the_event.title,
starts_at: "" + the_event.start,
ends_at: "" + the_event.end,
description: the_event.description
Step 5:
Create Event model by having the follwoing feilds
title, description,start,end, allDay
Step 6:
Now we need to create views and controller for Event Model , I hope you know how to create views and controller for Event model , i dont explaing those things here . Once you done with creating views and controller . Fullcalendar display event those are in json format , so we need to return json object i mean to say that we need to return events object in the form of json , so i am writing some simple code here look at this one .
In EventsController write the following snippet in index method
class EventsController < ApplicationController
def index
@events = Event.scoped
@events = Event.between(params['start'], params['end']) if (params['start'] && params['end'])
respond_to do |format|
format.html # index.html.erb
format.json { render :json => @events }
end
end
end
in the above snippet i have used scope (between) on Event model so we need to define scope on Event model , write the following code in Event Model.
class Event < ActiveRecord::Base
scope :between, lambda {|start_time, end_time|
{:conditions => ["? < starts_at < ?", Event.format_date(start_time), Event.format_date(end_time)] }
}
def self.format_date(date_time)
Time.at(date_time.to_i).to_formatted_s(:db)
end
end
we can tell to event model which fields we want to return back to calendar by specifying in json method , i am going to write as_json method in Event model
class Event < ActiveRecord::Base
def as_json(options = {})
{
:id => self.id,
:title => self.title,
:description => self.description || "",
:start => starts_at.rfc822,
:end => ends_at.rfc822,
:allDay => self.all_day,
:recurring => false,
:url => Rails.application.routes.url_helpers.event_path(id),
}
end
end
here i wrapped up json object with some fields , above i mentioned url attribute which holds path of respective event . When you click on calendar dates this will be invoked.
Step 7:
Now dont forget to create event the following is the sample code for creating events .
views/events/_form.html.erb
<%= form_for(@event) do |f| %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :starts_at %><br />
<%= f.datetime_select :starts_at %>
</div>
<div class="field">
<%= f.label :ends_at %><br />
<%= f.datetime_select :ends_at %>
</div>
<div class="field">
<%= f.label :all_day %><br />
<%= f.check_box :all_day %>
</div>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Step 8:
thats it you can view your events in calendar by adding following line in events/index.html.erb
<div id = 'calendar'> </div>
which will render full calendar view .
Step 9:
thats it now set your roots and you can open your browser and type
localhost:3000/events .
I hope this will help you to give some idea how to shedule events using fullcalendar in rails 3 .I welcome your comments on this article so that i can improve further .thank you
Cheers,
Ratnakar
About the Author
Ratnakar is a Software Engineer, Blogger from India.His articles mainly focus on Ruby on Rails Technology.
0 comments: