#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 codeProject Files in Zip (104 KB)
mp4Full Size H.264 Video (16.5 MB)
m4vSmaller H.264 Video (10.7 MB)
webmFull Size VP8 Video (27.3 MB)
ogvFull Size Theora Video (24.3 MB)

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;
}