29 Mar 2010

Jquery Full Calendar with Ruby on Rails

RubyonRails, jquery, rails, ruby on rails posted by Akhil Bansal

Contrary to popular belief, working on a client project gives us a generous margin of creativity and explore innovative solutions. Take the example of a recent project I was working on. The client required a collaboration-based calendar module for their application similar to Google Calendar. Initially we started developing it from scratch , but then, we found an awesome Jquery plugin.

“FullCalendar” provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month. It also supports an intuitive interface to manage events that spans over multiple days or weeks. It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

I decided to give it a try and utilize its hooks for user triggered events within our Rails application. This small effort resulted in a barebone Rails app that might provide a good base for your project which require calendar, scheduling or appointment features. I called it fullcalendar_rails and it is now available on github with a working demo at http://fullcalendar.vinsol.com.

Feel free to give your valuable feedback. I hope you will find this useful.

Update: On popular demand, I have added recurring events functionality with daily, weekly and monthly frequencies. It also allows for exceptions to recurring events including delete and edit features.



Did you like this? Share it:

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

  • bbnnt

    bien !

  • http://www.aaronsumner.com/ Aaron Sumner

    Thanks for sharing this–one of my big projects at my day job is a calendar app. This looks like it would be a great addition to it.

  • Srdjan

    Can you create recurring events?

  • bansalakhil

    Our demo application doesn't support recurring events for now.

    But, by doing little changes you can create recurring events. All you need to handle it from backend. Your backend would be able to create and handle recurring events and you need to make suitable changes in the event creation form. This jQuery calendar plugin is a way to present your events.

  • bansalakhil

    Thanks for writing the great code ;-)

  • Paul

    does the calendar support multiple resources for day view?

  • bansalakhil

    Added recurring event functionality to the demo app

  • bansalakhil

    Yes, You can specify multiple event resources.

  • Paul

    so can you also have a multi-resource day view with this calendar? ie, when u click on day view, you can see column headers resource1, resource2, resource3 and so on…with their pertinent events below them?

  • Wkethman

    Can you recommend a way to embed the http://trentrichardson.com/examples/timepicker/ into the Create Event pop-up. I have gotten the plugin to work with other forms but unfortunately not for the pop-up.

  • Wkethman

    I was able to solve the problem by putting the declaration $('#event_starttime').datetimepicker(); inside the _form/_edit.html.erb files, changing the start/endtime fields to text_field then adding .ui-datepicker { z-index:999999; } to the jquery-ui style sheet to make the pop-up come in front of the create/edit event dialog. In addition, per the installation of the plugin included the timepicker css (provided on the site) styles in jquery-ui.css, included the timepicker.js as needed and done. Thought I would share my solution…

    One last problem though, it seems if you click on an event and the small event desc dialog comes up where it prompts you to edit the event or delete then you click edit and the form comes up, it opens up into the bottom of the page which is not ideal. My guess is that because of the position of the smaller dialog (centered horizontal/vertical) that it uses the same position and extends the next dialog which just doesn't work. Do you have any solution to this?

  • Coops

    How would i go about adding a category and each category has a different color (current just one color, blue)

    Help is much appreciated.

  • Wkethman

    You can pass a className: String/Array (optional) – A CSS class (or array of classes) that will be attached to this event's element, in your events array and then have those classes correspond to those in your css file

  • Coops

    Sorry to be a pain… are you able to provide an example? I'm not very good at working with JS and ruby dynamically :D

  • Coops

    hey i keep getting this error when doing recurring.

    uninitialized constant EventSeries::END_TIME

    any ideas why?

  • Coops

    Figured this out… thanks for your help.

  • Dyohi

    Dude, your links on this page don't work in FireFox.

  • http://twitter.com/spy_com spy

    how can I update it for rails 3 ? thx

  • http://twitter.com/spy_com spy

    forget, I just used rails2 ) but how can I change colors of my events?

  • Alam

    hi it's good help….but i want simple popup calender on Rho-mobile framework “Rhodes”

  • Gmou5813

    While it works by itself wonderfully, when I try to integrate it into an existing project, I encountered many problems, mainly due to the conflict with prototype. I have tried many different ways to resolve the problem, but also bump into something new. 

    Could anyone share with me your experience in resolving the conflict with prototype?

    Thanks in advance. 

  • Pradeep83 Achu

    I want a form to popup when the dates gets selected. Any idea on how to achieve this??

  • Trbartel01

    Thanks for the lead…great potential…for those needing Rails 3 take a look at: https://github.com/bokmann/rails3_fullcalendar/tree/master/app

  • Trbartel01
  • Achu Pattnaik

    i am not able to run the application in Rails 3 can u speficy or suggest any solution to run it
    in Rails 3 or else can u post one updated version of this application, also the events of javascript ajax ar not been called please reply

blog comments powered by Disqus