Jquery Full Calendar with Ruby on Rails

By bansalakhil March 29, 2010

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.

Share this:

Leave a comment

Your email address will not be published. Required fields are marked *

29 comments

  1. bbnnt says:

    bien !

  2. Aaron Sumner says:

    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.

  3. Srdjan says:

    Can you create recurring events?

  4. bansalakhil says:

    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.

  5. bansalakhil says:

    Thanks for writing the great code 😉

  6. Paul says:

    does the calendar support multiple resources for day view?

  7. bansalakhil says:

    Added recurring event functionality to the demo app

  8. bansalakhil says:

    Yes, You can specify multiple event resources.

  9. Paul says:

    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?

  10. Wkethman says:

    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?

  11. Coops says:

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

    Help is much appreciated.

  12. Wkethman says:

    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

  13. Coops says:

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

  14. Coops says:

    hey i keep getting this error when doing recurring.

    uninitialized constant EventSeries::END_TIME

    any ideas why?

  15. Coops says:

    Figured this out… thanks for your help.

  16. Dyohi says:

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

  17. spy says:

    how can I update it for rails 3 ? thx

  18. spy says:

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

  19. Alam says:

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

  20. Gmou5813 says:

    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. 

  21. Pradeep83 Achu says:

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

  22. Trbartel01 says:

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

  23. Achu Pattnaik says:

    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

  24. asiniy says:

     spy, you can go to the wiki of event calendar. It updated now

  25. Richlewis14 says:

    Excellent App, how would I go about adding this to an existing rails 3 app?

  26. Pingback: Rails Engine implementation of jQuery FullCalender plugin | Vinsol - Ruby on Rails, iOS, Android Consulting and Development