#213 Calendars

I've used jquery-ui datepicker in projects. if a dom contains a datepicker, it couldn't handle correct when i clone this dom use jquery.

Thanks for this screencast! I actually ended up writing my own calendar helper in a rails app I wrote some time ago. I needed alot of ajax functionality for adding events and stuff so using a allready build helper wasn't suited for my needs . It's actually quite easy to make your own calendar, just combine date and time methods that rails already provide you with.

I have created a progressive enhanced version to use jQueryUI calendar with the current rails date_select
http://gist.github.com/396057

Formtastic + calendar_date_select = http://github.com/dyohi/formtastic_calendar_date_select

Ryan,
This is great! Please consider doing more jQuery UI related screencasts especially in the Rails context. I am trying to apply jQuery to Rails and this is a huge help.
Regards,
Bharat

I could have used this about 6 months ago! Great stuff. In my case, I had fewer options for a date entry widget because I needed a widget which could select both date AND time. And with my preferred jQuery. The jQuery UI item doesn't handle time. I found this adaption of Harper's Calendar Date Select to be a solid solution:
http://github.com/railssignals/jquery_calendar_date_select

i have to agree with #8... for a few episodes, the codecs mess up VLC and playback is completely stuck

I really like FullCalendar: http://arshaw.com/fullcalendar/

Great screencast!! I would really like to see how time could be manage in this app. Thanks!

I agree with Daniel T, Full Calendar is really great. We used it for a full featured calendar function in a localized Rails app. Fast and easy to connect to a JSON-driven web service.

forgot to mention in my previous comment, had good success with this, though evidently the original author has found maintaining the project too time consuming:
http://wiki.github.com/robmonie/jquery-week-calendar/

I ran across Full Calendar recently but have not had time to work with it. Seems excellent from what I have seen.

Interestingly I needed a calendar in both of my current client projects: http://radiopodcast.fr has one in the "ma programmation" section, where I used #6 (week) in http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ (Very usefull URL) and in the backend of http://sevensnap.com we also needed one so I used http://github.com/dmix/weekly_builder which is based on the demoed table_builder.

Thanks for your amazing podcast Ryan. I'm one of those who got into Rails (and Unobstrusive Javascript) thanks to you.

Doesn't work with Rails 3, it fails with the safe html. any ideas?

I think there is a fundamental difficulty using Date.parse for input from informal text date fields in ruby 1.9.1 and later. In particular, in Ruby 1.9.1:

Date.parse("1/2/03") is February 2, 2001.
Date.parse("1/2/2003") is February 1, 2003.

Ugh! A quick breeze suggests that this was not accidental or a bug. In other words, don't use Date#parse in Ruby 1.9.

And no amount of attempts at localization seemed to get me the desired result for an american date-picker text field. In my last Rails3/1.9.1 experiment, I used a mock-field (:mmddyy_date), defining mmddyy_date= methods, and Date.strptime(string, "%m/%d/%Y") [always inside a begin-rescue-end].

So Date input text fields are getting a bit tricky, particularly in forms. Is there a more elegant solution?

Sorry, in the previous message:

Date.parse("1/2/3") is February 3, 2001.
Date.parse("1/2/2003") is February 1, 2003.

of course in Ruby 1.8.7, it was different:

Date.parse("1/2/3") is January 2, 3
Date.parse"(1/2/2003") is January 2, 2003

Go figure

I was looking around for a simple calendar solution, and this helps a lot! Had some difficulties using Time.now for comparison, and then realized I needed to use Time.zone.now instead, because local time zones were set. Works great now. Thanks Ryan.

Great screencast!

wish it had been around 3 months ago when I made a rails app for the company I work for I ended up making a calendar myself

Ryan,

I'm becoming addicted to your Railscasts. I've just about decided to convert the two websites I act as webmaster for to Rails, and your Railscasts are making Rails more and more tempting.

Do you know of any calendar plugin/helper that handles "weekly" events such as a class that's held on Tuesdays from May 4th through June 29th?

Great episode, it will help me a lot since my website which I plan to rewrite to Rails (from PHP) is dealing with exact event calendar you showed. Thanks!

Great episode !

Lars > I have the same problem. The plugin doesn't work with rails3.

Is anybody has an idea ? I tryed to add some html_safe into the plugin, but it's not working !

Beware, the url for jQuery UI css is old. They're at 1.8.1 now. Just replace the version in the url and you'll be fine.

Date.parse on my system said a date in the form YYYY-MM was an invalid date. YYYY/MM is what it was looking for.

Mac OS X 10.6.3
ruby 1.8.7 (2009-06-08 patchlevel 173) [universal-darwin10.0]
Rails 2.3.5
 

This may be of some use if you need to use multiple datepickers on the same form.

http://mentalreset.blogspot.com/2010/02/jqueryui-datepicker-on-multiple.html

The trick was that the datepicker plugin seems to require an id on the designated field when multiple datepickers exist on the same form.

Useful my by fork of table_builder is more useful :)

Date.parse(params[:month]) didn't work for me using Ruby 1.8.7

In controller just replace params[:month] with params[:month].gsub('-','/') so you have:

@date = params[:month] ? Date.parse(params[:month].gsub('-', '/')) : Date.today

There is a nice demo rails event crud app integrating the jQuery full calendar plugin, even with repeating events: http://github.com/vinsol/fullcalendar_rails

Ryan, your consistency at producing these quality screencasts is both amazing and inspiring. I remember watching them when they first started and thinking they were excellent but also thinking you would probably stop after about ten episodes. I went away from web programming for a long time but now am back. In that time, holy cow, you have built an empire! An empire of goodness. Still trying to catch up.

Question about datepicker. After reviewing the screencast, I think the subtle problem is actually happening there too.

The date that comes out of the database is in the form YYYY-MM-DD and jQuery datepicker doesn't know how to interpret it and isn't able to mark the date. (In the screencast the current date and the selected date are the same so it is not obvious.) Once the date is selected it is formatted MM/DD/YYYY. Fortunately rails knows how to parse this so it goes back into the database correctly.

Wondering what the best way to make rails produce dates like MM/DD/YYYY or alternatively make jQuery understand YYYY-MM-DD so it marks the date correctly. Anyone have any thoughts on making ActiveRecord and jQuery agree on date formats?

One solution to #52 is to change jQuery datepicker's format:

$("#article_published_on").datepicker({dateFormat: 'yy-mm-dd'});

Also, Episode #32 shows how to make your model cooperate with the default format jQuery wants.

Wanting to use table_builder for a new Rails3 project, I took a cut at updating the block helpers and string security handlers to conform to the new idioms.

The old test suite was based on the old mechanics, so I was unable to make his tests work. It certainly worked for the application with which I was experimenting. I suppose I will need to revise the suite to work with the new mechanisms as well.

But a quick survey of the table and calendar functionalities appear to work. I will consider polishing this a bit and reworking it as a gem, if people are interested.

http://github.com/wizardwerdna/table_builder

I have an issue when I generate the datepicker textfield on the fly as shown in episode 197 - nested models form. The newly generated datepicker fields are not working. Anyone know how to fix that?

As I said before, great episode. However, I've no idea how to change first day of a week. Help please!

Regarding my previous question about datepicker not working for dynamically generated datepicker fields, I finally solved it in case anyone had the same problem:

<script src='http://pastie.org/1018775.js'></script>

Regarding my previous question about datepicker not working for dynamically generated datepicker fields, I finally solved it in case anyone had the same problem:

// application.js
$(function() {
  $('.datepicker').live('focus', function() {
    $(this).datepicker({dateFormat: 'dd M yy',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true});
});
});

Hi. I'm new to Rails and even new to programming so this might seem trivial to you. I'm using the calendar_for plugin and would like to use it for a sort of a diary. So, for each day, there is only one post. I would like to fill the calendar with links to these posts but if there's no post for a certain date, a link to new_post. I just can't get it right and end up with links to new_posts for all days in addition to the links to existing posts. Any hints or tips?
Thanks!

With table_builder, if you get undefined method `strftime' for 0:Fixnum or the like (might be a Postgres issue), be sure to return a date from your :day_method, like so (in your model):
task.rb
def deadline_date
    self.deadline ? self.deadline.to_date : nil
  end

This may be a Rails 3 issue, but my db would not interpret the date format "mm/dd/yyyy" as Ryan's did. I revised my js to be as follows:

$(function() {
  $("#model_field").datepicker({
    dateFormat: 'yy-mm-dd'
  });
});

This appears to have fixed the issue. Thanks for the screencast!

hello I'm having trouble that my application is not recognizing the calendar_for method .. I think this is something have to do with installation of the table_builder because I had to install it manually by installing the zip folder and then copying the file in the vendor?
 
does anyone know what I'm doing wrong?
 

I am trying to use table_builder but
I am getting on ROR 2.3.8:
undefined method `safe_concat' for #<ActionView::Base:0x10217d8a8>

Any ideas?

Thanks

@yauco

the plugin had change, i guess the author was improve it to fit the Rails3 , I've seen the solving by pasting the old codes , watch http://stackoverflow.com/questions/3356955/safe-concat-error-while-using-table-builder-rails-plugin

I forked table_builder to create a Rails 3 compatible gem version:

http://github.com/jchunky/table_builder

Unfortunately i cant get this running with rails 3. You got any suggestions?

Hallo,

I did follow yours, but I got this error:
undefined method `html_safe' for "Sunday":String

Any remedy?

Awesome cast, thanks a lot Ryan!

The only litte thing that doesnt work is highlighting of a current day in the table. Does anyone has an idea?

Hi, I got the same error that rafita. How i can solve this problem?
Thanks

How print all events without year create? For example: i have many events in one day but another years, how to display it?

@ed or anyone else with the dynamic datepicker problem: include another call to the regular function within the add_fields function.

I am fairly new to rails, but I'd love to install and use this calendar, but how would you do that in rails 3?

the following command doesn't seem to work:

script/plugin install git://github.com/p8/table_builder.git

Thanks!

I have a weird issue...
calendar is generating for all articles in my blog e.g. I have 5 articles so each article has own calendar on main page.

<%= calendar_for @articles do |calendar| %>
<%= calendar.head('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday')%>
<% calendar.day(:day_method => :published_at) do |date, articles| %>
<%= date.day %>
<% end %>

<% end %>

I'm using rails 3.1

How to fix it?

For those wanting to use this with Rails 3:

• Add the git link to your Gemfile [1]
• Make sure you use <%= when using the calendar_for helper

[1] gem "table_builder", :git => "git://github.com/p8/table_builder.git" - do not rely on the released gem, it seems to be stale.

Any support for using simpleforms to use jquery datepicker function?

currently have for start time
<%= f.input :start %>

How would I modify this to make it text field?

hello,

i'm newbie of rubby an rails.
i'm using ruby version 1.8.7 and rails version 2.3.2.

I just downloaded this sample source code and tried to use.

I got this error

NoMethodError in Articles#index

Showing app/views/articles/index.html.erb where line #12 raised:

You have a nil object when you didn't expect it!
The error occurred while evaluating nil.strftime

Extracted source (around line #12):

9:
10: <% calendar_for @articles, :year => @date.year, :month => @date.month do |calendar| %>
11: <%= calendar.head('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday') %>
12: <% calendar.day(:day_method => :published_on) do |date, articles| %>
13: <%= date.day %>
14:
15: <% for article in articles %>

RAILS_ROOT: /home/markn/myRailsApps/blog
Application Trace | Framework Trace | Full Trace

/home/markn/myRailsApps/blog/vendor/plugins/table_builder/lib/table_builder/calendar_helper.rb:101:in objects_for_days'
/home/markn/myRailsApps/blog/vendor/plugins/table_builder/lib/table_builder/calendar_helper.rb:100:ineach'
/home/markn/myRailsApps/blog/vendor/plugins/table_builder/lib/table_builder/calendar_helper.rb:100:in objects_for_days'
/home/markn/myRailsApps/blog/vendor/plugins/table_builder/lib/table_builder/calendar_helper.rb:27:inday'
/home/markn/myRailsApps/blog/vendor/plugins/table_builder/lib/table_builder/table_builder.rb:115:in tbody'
/home/markn/myRailsApps/blog/vendor/plugins/table_builder/lib/table_builder/calendar_helper.rb:26:inday'
/home/markn/myRailsApps/blog/app/views/articles/index.html.erb:12:in _run_erb_app47views47articles47index46html46erb'
/home/markn/myRailsApps/blog/app/views/articles/index.html.erb:10:in >_run_erb_app47views47articles47index46html46erb'

Request

Parameters:

None

Show session dump
Response

Headers:

{"Cache-Control"=>"no-cache",
"Content-Type"=>"text/html"}`

Does someby have any suggestions?

Thank you.

Thanx 'ed'..Your code for dynamic date fields really helped me...I've lost my 1 week over this....Thank you..!!

Check out this fork of TableBuilder if you're still looking for something like this. It's been gemified so it's simple to use with bundler and won't result in any deprecation warnings with Rails 3.2

Bad Luck..Date picker is coming but still the values are changing only in the first text field only...every other text fields remain empty....!!! Is anyone out there can help me???

Not sure why but each day lists out the all the articles for me instead of just the ones for that day. Any suggestions?

day_method is correct too (I'm using :due_date and it has a datatype as date).

Any idea what's wrong?

If you're having problems getting Rails to save your date...

Several people have noted that Rails will silently to update the column is the date is in the wrong format, e.g. MM/DD/YYYY. Here's a little CoffeeScript function that you can use to extend the jQuery .datepicker() method:

datePicker = (selector) ->
  $real = $(selector)
  $display = $real.clone().attr({class: null, id: null, name: null})
  $real.hide()
  $display.insertBefore($real)
  $display.datepicker({altField: $real, altFormat: 'yy-mm-dd'})

The function just creates a new input, using the original as a template, hiding it, but still using as the altField that Rails will read on the PUT request, using a Rails-lovin' date format.

Call the function from my_model.js.coffee like so

$ ->
  datePicker("#model_datefieldname")

How to sort days in calendar table such as <%= calendar.head('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday')%> with correct order of day? I want to make Monday the first day of the week.
please help me!

Tried this, but no calendar shows up - I just get the Month Header with the FWD/BACK arrows to change the month. No data or even a blank calendar displays. There is data in my @schedules array.

<div id="calendar">
<h2 id="month">
<%= link_to "<", :month => (@date.beginning_of_month-1).strftime("%Y-%m-%d") %>
<%=h @date.strftime("%B %Y") %>
<%= link_to ">", :month => (@date.end_of_month+1).strftime("%Y-%m-%d") %>
</h2>
<% calendar_for(@schedules) do |t| %>
<% t.head('mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun') %>
<% t.day (:day_method => :coursedate) do |day, schedules| %>
<%= day.day %>
<% schedules.each do |schedule| %>
<%= h(schedule.id) %>
<% end %>
<% end %>
<% end %>
</div>

Would it be possible to pull dates from 2 different models in the same calendar? .. For example, I have a holidays table and a birthdays table and would like to have 1 calendar display both..

I do not want the event to occur every day, I want the event to occur only on Monday / Wednesday / Friday or Tuesday / Thursday between two different dates.

Please, somebody help me, I need a lot.

Since now I thank

I recently created a gem to aid in building and rendering a monthly calendar. The API is much less magical than the table_builder gem, with all the same features. Check it out at https://github.com/austinthecoder/cal. I hope it helps.

It looks like Ruby 1.9.3 has a different idea of Date.parse. It doesn't want to parse the date from the query string as it was in the Cast.

def index
  @events = Event.all
  @date = params[:month] ? Date.parse("01-#{params[:month]}") : Date.today
end

Had to add the first day of the month to the controller to get it to parse it correctly. Else it parses it as if the month is the day, so the calendar never appears to change.

Perfect! This was exactly what I am needing - the blog-post/calendar display at the end.

The table builder date selection is not recognized by Rails (3.2.11). After selecting the date and creating the new object, the date fails my 'presence: true' validation. I get an error message "Date can't be blank'.

Has anyone seem this type of error?

(Note: I am using watu table builder)

can I use the calendar to have a live update for booking stuff? If so then do I have to use ActionController::Live for it?