#213 Calendars

May 10, 2010 | 9 minutes | Views, Plugins, Forms

If dates play an important role in your application, consider adding a date picker or calendar view as shown in this episode.

Click to Play Video ▶

Download:
source code Project Files in Zip (104 KB)
mp4 Full Size H.264 Video (16.5 MB)
m4v Smaller H.264 Video (10.7 MB)
webm Full Size VP8 Video (27.3 MB)
ogv Full Size Theora Video (24.3 MB)

Browse_code Browse Source Code

There is a newer version of this episode, see the revised episode.

Resources

bash

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

articles_controller.rb

def index
 @articles = Article.find(:all)
 @date = params[:month] ? Date.parse(params[:month]) : Date.today
end

layouts/application.html.erb

<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css", "application" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js", "application" %>

articles/index.html.erb

<div id="calendar">
 <h2 id="month">
 <%= link_to "<", :month => (@date.beginning_of_month-1).strftime("%Y-%m") %>
 <%=h @date.strftime("%B %Y") %>
 <%= link_to ">", :month => (@date.end_of_month+1).strftime("%Y-%m") %>
 </h2>
 <% calendar_for @articles, :year => @date.year, :month => @date.month do |calendar| %>
 <%= calendar.head('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday') %>
 <% calendar.day(:day_method => :published_on) do |date, articles| %>
 <%= date.day %>
 <ul>
 <% for article in articles %>
 <li><%= link_to h(article.name), article %></li>
 <% end %>
 </ul>
 <% end %>
 <% end %>
</div>

articles/_form.html.erb

<%= f.text_field :published_on %>

application.js

$(function() {
 $("#article_published_on").datepicker();
});

css

#calendar table {
 border-collapse: collapse;
 width: 100%;
}
#calendar td,
#calendar th {
 font-family: "Lucida Grande",arial,helvetica,sans-serif;
 font-size: 10px;
 padding: 6px;
 border: 1px solid #999;
}
#calendar th {
 background: #DDD;
 color: #666;
 text-align: center;
 width: 14.2857142857143%;
}
#calendar td {
 background: #FFF;
 color: #777;
 height: 80px;
 vertical-align: top;
 font-size: 16px;
}
#calendar .notmonth {
 color: #CCC;
}
#calendar #month {
 margin: 0;
 padding-top: 10px;
 padding-bottom: 10px;
 text-align: center;
}
#calendar #month a, #calendar #month a:hover {
 text-decoration: none;
 padding: 0 10px;
 color: #999;
}
#calendar .today {
 background-color: #D7F2FF;
}
#calendar ul {
 margin: 0;
 margin-top: 5px;
 padding: 0;
 list-style: none;
}
#calendar li {
 margin: 0;
 padding: 0;
 font-size: 11px;
 text-align: center;
}