Tuesday 29 January 2013

full calendar in rails3 , jquery full calendar in rails3

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.
Reach Him : Google+ Facebook Twitter

4 comments:

  1. when I drop or resiza an event, the database is not updated...why?

    ReplyDelete
    Replies
    1. I have rails4 and the update method and new method work fine.

      Delete