Extremely Simple Calendar Integration for Rails
Today we’ll go over an extremely simple way to add a javascript/css calendar to your Rails app. We will be using the Calendar Date Select Plugin. It is a small, easy to use calendar based on the prototype library.
This was written back in the day for Rails 1.2, so take all this information with a grain of salt.
Installation is simple, and uses the typical installation syntax:
script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select
Voila! Installed!
Now, we just need to integrate it.
First, in your layout you need to add the javascript tag:
<%= calendar_date_select_includes "silver" %>
You can also use “red”, “blue” or “nil” for other color schemes.
Also note that you need to have prototype included as well, so if you haven’t already, you should also add the following to your layout:
<%= javascript_include_tag :defaults %>
And now, we’re ready to use it! Usage is simple. I was using it to keep track of an expiry date for a property, so I used to the following tag:
<%= calendar_date_select_tag "property[expiry_date]", @property.expiry_date.to_s %>
If you wish, you can also check out the demo section for more information on using it with Form Builder.
Finally, I didn’t like the default ‘natural’ syntax for the date “August 8th, 2007″, so I changed it to use my preference, hyphenated syntax. To do this, open your environment.rb file and add the following line:
CalendarDateSelect.format = :hyphen_ampm
There! That is all I needed to do. Of course, there are more options, simply adding a :time => true will allow you to have a time field as well. There are a few more configuration options available for the calendar. You can find out more and get some more screenshots by visiting the project’s homepage.
Update:
Sorry, I haven’t responded to basically anyone that has commented here. I wish I had more time, but at this point I don’t. I am planning on getting back into this, but it might take a while. :(
on August 27th, 2007 at 7:10 am
This is an awesome write up! I’ve added a link to this blog entry from the project homepage. One thing you may want to make clear, is that “CalendarDateSelect.format = :hyphen_ampm” needs to go at the bottom of environment.rb, after “Rails::Initializer.run do |config|”. This is because the plug-in needs to be loaded before you can set config parameters.
on September 8th, 2007 at 9:11 pm
I don’t understand two things:
1. Why is the text box enabled? I’d like the user to not be able to text-change the date, yet I want them to still be able to change the date! (:disabled in the helper won’t do this).
2. How do I re-parse the date back into my model? Or does it just work? ;-) (i’m guessing the latter).
on September 9th, 2007 at 7:37 pm
I’m guessing that the text box is enabled to allow more advanced users to change the date on their own. I’ll take a look and see if I can find out how to disable it, but it might take a day or two.
As for parsing the date, you are correct. It just works.
on September 10th, 2007 at 9:36 pm
I have also posted this question in the issues section of the googlecode: do you think there is a way to popup an error box incase the selected date is not selectable such as weekends or holidays ?
on September 27th, 2007 at 12:29 pm
1.8.1 was released recently, and addresses the concern of having the text-box disabled. Personally, i prefer to have it enabled, but I understand not everyone has the luxury of having a group of users from the same region for their site.
on September 27th, 2007 at 8:01 pm
Thanks for the update tim! I’ll be sure to check it out.
on November 4th, 2007 at 2:25 pm
I am getting: $w is not defined error message on line 26:
Date.weekdays = $w(”S M T W T F S”);
Any pointers on how to fix this problem?
on February 16th, 2008 at 12:02 am
Seems that application needs to be restarted (this meant restarting apache in my case) after plugin is installed or otherwise things will not work.
Thanks for the nice intro to the plugin!
on April 7th, 2008 at 2:47 pm
I’m new to rails and was wondering where to actually put the above code to generate the calendar. Should I be messing with the calendar_controller, or should I just place the small tag in my index.html view?
on April 10th, 2008 at 11:11 pm
Sounds perfect to me. I have read this post with a great pleasure. You should write much more often.
on April 15th, 2008 at 2:15 pm
Can I enter dates before 1988? For a birth-day field I need to go back a little more….
on April 15th, 2008 at 2:17 pm
Never mind, rtfr. Thx
on April 27th, 2008 at 9:54 pm
Me again, this time I DID read the doc and the code. Is there a way to require the OK button to be pressed? Not speaking js I assume the day selection is sending an event back to be processed, but my users are complaining. They want to select the DAY first, then the month and year.
Thx
on May 13th, 2008 at 7:32 am
hi, I tryed step by step your tutorial, now I’m getting an
Application error
Rails application failed to start properly
message
I’m using rubyOnRails 2.0
do you know how can I go back to prior state?
thanks in advance
on May 20th, 2008 at 8:55 am
Hi,
I tried to integrate datecontrol like this
Date:
Calling the page I get an Error popup:
Prototyp 1.6.0 is requiered …
on May 31st, 2008 at 3:57 pm
CalendarDateSelect moved to git, so the install instructions have changed :) Subversion will no longer be updated. Thanks!