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

# articles_controller.rb 

def index 

  articles</span> = <span class="co">Article</span>.find(<span class="sy">:all</span>)
  <span class="iv">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</span>.strftime(<span class="s"><span class="dl">&quot;</span><span class="k">%B %Y</span><span class="dl">&quot;</span></span>) <span class="dl">%&gt;</span></span> 
    <span class="il"><span class="dl">&lt;%=</span> link_to <span class="s"><span class="dl">&quot;</span><span class="k">&gt;</span><span class="dl">&quot;</span></span>, <span class="sy">:month</span> =&gt; (<span class="iv">date.end_of_month+1).strftime("%Y-%m") %> 

  </h2> 

  <% calendar_for articles</span>, <span class="sy">:year</span> =&gt; <span class="iv">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 :publishedon %>

// application.js 

$(function() {

  $("#article_published_on").datepicker();

});

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

}